滚动页面，然后再执行CSS3 动画

来源：互联网发布：mac怎么连接打印机编辑：程序博客网时间：2024/05/22 15:14

<!doctype html><html><head><meta charset="utf-8"><title>动态CSS3动画</title><style>* {margin:0; border:0; padding:0;}body {width:100%; height:2000px;}#div1 {width:100px; height:100px; background-color:#000; position:relative;}.ani {animation:myfirst 2s linear forwards; -webkit-animation:myfirst 2s linear forwards;}@keyframes myfirst {from {left:0; top:0} to {left:400px; top:400px;}}@-webkit-keyframes myfirst {from {left:0; top:0} to {left:400px; top:400px;}}</style><script>window.onload = function (){<span style="white-space:pre"></span> <span style="white-space:pre"></span>window.onscroll = function (){<span style="white-space:pre"></span>//两种方法：1、通过style.cssText写入样式；2、通过className添加类。<span style="white-space:pre"></span>//document.getElementById("div1").style.cssText = "animation:myfirst 2s linear forwards; -webkit-animation:myfirst 2s linear forwards";<span style="white-space:pre"></span>document.getElementById("div1").className = "ani";<span style="white-space:pre"></span>}}</script></head><body><div id="div1"></div><script></script></body></html>

0 0