这个属性是实验性功能,目前仅 Chrome Canary (115以上)版本浏览器支持此特性,可以实现滚动鼠标滚轮滚动页面驱动动画效果。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<title>BFW NEW PAGE</title>
<style>
#square {
background-color: deeppink;
width: 100px;
height: 100px;
animation-name: rotateAnimation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: scroll();
position: fixed;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#stretcher {
height: 1200px;
}
</style>
</head>
<body>
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
</body>
</html> 网友回复
CodeGraph与RTK(Rust Token Killer)有啥区别?
python如何将svg图标转换成png图片?
windows如何设置让多个人同时远程桌面连接同一台电脑同时可操作不被踢出?
什么是WebRCD技术?
如何在centos的服务器docker上安装运行微信qq?
如何用ai图片模型祛除图片油腻感?
google的gemini-omni多模态大模型在哪可以免费体验?
google的Antigravity 、Antigravity CLI、Antigravity IDE、Antigravity SDK有啥区别不同?
Pyaudio如何录制windows扬声器输出的声音?
为啥win10电脑上sounddevice与pyaudio无法播放声音?


