css抖动(想怎么抖就怎么抖)很好玩哦
其实要想做抖动不难,最关键的就是会导入外部的css样式就好了。
以下是我编写的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="csshake.min.css" type="text/css" rel="stylesheet" /> <style type="text/css"> h1{color:red;} h3{color:#0000ff;} </style> </head> <body style="text-align:center"> <h1 class="preview-item big shake shake-hard shake-constant hover-stop">英雄们都给我抖起来 shake</h1> <h3 class="shake shake-hard">抖动着的英雄<br />不一样的英雄</h3> <div> <span class="shake shake-opacity"><img src="2.jpg" height="200" width="400" /></span> <span class="shake shale-slow"><img src="4.jpg" height="200" width="400" /></span> </div> <div> <span class="glass shake shake-hard freez"><img src="5.jpg" height="200" width="400" /></span> </div> <p></p> <p class="shake shake-slow">点哪抖哪</p> <p>更多详情请点击 <a href="http://blog.csdn.net/qq_24928451 "style="text-decoration:none" target="_blank">csdn</a></p> <p>想要整个网页都一起抖动吗<a href="2.html" style="text-decoration:none" target="_blank">点这里吧!</a></p> </span> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="csshake.min.css" type="text/css" rel="stylesheet" /> <style type="text/css"> h1{color:red;} h3{color:#0000ff;} body{text-align:center} </style> </head> <body class="preview-item big shake shake-hard shake-constant hover-stop"> <h1 >英雄们都给我抖起来 shake</h1> <h3 >抖动着的英雄<br />不一样的英雄</h3> <div> <span ><img src="2.jpg" height="200" width="400" /></span> <span ><img src="4.jpg" height="200" width="400" /></span> </div> <div> <span ><img src="5.jpg" height="200" width="400" /></span> </div> <p></p> <p >点哪抖哪</p> <p>更多详情请点击 <a href="http://blog.csdn.net/qq_24928451 "style="text-decoration:none" target="_blank">csdn</a></p> </span> </body> </html>
效果图差不多这样
当你们用时,记得要把图片地址改一下!
http://elrumordelaluz.github.io/csshake/css/csshake.min.css 这是css样式下载表的地址,要用时要下载,直接另存为就可以了。记得要把css样式表和网页放在一起,图片也要放到一起。
最好像我这样建个文件夹。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。