米兔招财进宝摇头娃娃 CSS代码特效

mitu

今天在小米官网看到这个代码，感觉蛮有意思的。这不，也快过年了，放一个这样的摇头娃娃到你的博客吧！来年财源滚滚哦！哈哈！

其实这段代码也不是很复杂，也可以自己修改参数达到不同的效果，摆动幅度和方向都能改的，小白级代码，高手绕道哈。

通过下面的按钮可以查看演示，复制然后另存为HTML就能用了，至于你要这么用那就看你咯！

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>米兔-招财进福|Wwww.Dz9.Net</title> </head> <style> body { background-color:#ae1a0f } .ys_head { background-repeat:no-repeat; background-image:url("http://dzimgs.bcs.duapp.com/2014/01/ys_9.jpg"); background-position:50% 50%; background-color:#b01b0e } .ys_head .cont { width:960px; margin:0 auto; height:830px; position:relative; overflow:hidden } .ys_head .cont .logo { position: absolute; left: 0; top: 0; width: 66px; height: 66px; } .ys_head .cont .mitu_head { position:absolute; top:160px; left:262px; width:415px; height:250px; background-repeat:no-repeat; z-index:3; background-image:url("http://dzimgs.bcs.duapp.com/2014/01/ys_3.png"); _background:0; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dzimgs.bcs.duapp.com/2014/01/ys_3.png') } @-webkit-keyframes roll { 0% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 25% { transform:rotate(20deg); -ms-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -moz-transform:rotate(20deg) } 50% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 75% { transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -moz-transform:rotate(-20deg) } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } }@keyframes roll { 0% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 25% { transform:rotate(20deg); -ms-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -moz-transform:rotate(20deg) } 50% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 75% { transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -moz-transform:rotate(-20deg) } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } }@-moz-keyframes roll { 0% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 25% { transform:rotate(20deg); -ms-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -moz-transform:rotate(20deg) } 50% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 75% { transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -moz-transform:rotate(-20deg) } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } }@-o-keyframes roll { 0% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 25% { transform:rotate(20deg); -ms-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -moz-transform:rotate(20deg) } 50% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } 75% { transform:rotate(-20deg); -ms-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -moz-transform:rotate(-20deg) } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg) } }.ys_head .cont .rockRoll { transform-origin:50% 100%; -ms-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -moz-transform-origin:50% 100%; -o-transform-origin:50% 100%; animation:roll 2s linear infinite normal; -moz-animation:roll 1.5s linear infinite normal; -webkit-animation:roll 2s linear infinite normal; -o-animation:roll 1.5s linear infinite normal } .ys_head .cont .mitu_body { position:absolute; top:380px; left:282px; width:385px; height:260px; z-index:4; background-repeat:no-repeat; background-image:url("http://dzimgs.bcs.duapp.com/2014/01/ys_5.png"); background-position:-6px 0; _background:0; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dzimgs.bcs.duapp.com/2014/01/ys_5.png') } </style> <body topmargin="0" leftmargin="0" > <div class=" J_body"> <div class="ys_head"> <div class="cont"> <a href="http://www.dz9.net" target="_blank" class="logo"></a> <div class="mitu_head rockRoll"> </div> <div class="mitu_body" style="top:371px;"> </div> </div> </div> </div> </body></html>

提示：你可以先修改部分代码再运行。

Ps:摇头娃娃的脑袋是米兔的，不过你可以改成其他的，比如改成财神爷！

米兔招财进宝摇头娃娃 CSS代码特效

《“米兔招财进宝摇头娃娃 CSS代码特效”》有 2 条评论

发表评论取消回复

《“米兔 招财进宝 摇头娃娃 CSS代码特效”》 有 2 条评论

发表评论 取消回复

《“米兔招财进宝摇头娃娃 CSS代码特效”》有 2 条评论

发表评论取消回复