css3线性渐变在js里怎么写
2 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
引入jquery
然后给你要设置动画的对象增加或者删除css3动画的类就可以了。
如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> body{ padding: 20px; background-color:#FFF; } .colorchange { animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ }
@keyframes myfirst { from {background:red;} to {background:yellow;} }
@-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;} }
@-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} }
@-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;} } #main{ width:100px; height:100px; background:red; } #cgbt{ width: 100px; margin: 20px 0 0 0; text-align: center; cursor: pointer; } #cgbt:hover{ background-color: #2D93CA; } </style> </head> <body> <div id="main"> 我会变么？ </div> <div id="cgbt"> 点我让上面的变颜色 </div> <script src="jquery-3.2.1.min.js" type="application/javascript"></script> <script> $(document).ready(function(){ $("#cgbt").click(function(){ $("#main").attr("class","colorchange"); }); }); </script> </body> </html> |
- 2 回答
- 0 关注
- 868 浏览
添加回答
举报
0/150
提交
取消