其实也就三行代码:
animation: appear linear; animation-timeline: view(); animation-range: entry 0% cover 40%;
完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animate On Scroll</title> <style> body { min-height: 200vh; /* 为了创造滚动效果 */ padding: 20px; font-family: Arial, sans-serif; } .block { width: 300px; height: 200px; margin: 10px; background-color: #3498db; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; } @keyframes appear { from { opacity: 0; clip-path: inset(100% 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } .block { animation: appear linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } </style> </head> <body> <h1>Animate On Scroll</h1> <div class="block">Scrolling Element</div> <div class="block">Another Element</div> <div class="block">One More Element</div> <div class="block">One More Element</div> <div class="block">One More Element</div> <div class="block">One More Element</div> </body> </html>
网友回复
浏览器中如何将WebM视频转成mp4视频?
parlant如何改成qwen 的apikey与baseurl?
如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页?
python如何通过阿里云的api对域名进行解析和ecs主机服务器进行启动停止等操作?
Tesla Robotaxi可以让特斯拉车自动无人驾驶跑滴滴为车主赚钱,国内以后也会这样吗?
有没有可以监控安卓手机上的app打开后偷偷摸摸做了啥的监控软件?
webrtc进行p2p连接发送的文本音视频文件是否是加密的?
如何让一个可爱的三维动物通过three在浏览器中有表情动作的自然说话?
go与wails如何开发一个高性能的原生桌面应用?
python如何调用openai的api实现知识讲解类动画讲解视频的合成?