访问本站的时候（宽度大于800PX），肯定发现了本站左侧底部的蒲公英飘动，这个特效是不是很有感。如果你喜欢也可以给自己的博客DIY上这个特效。
【WordPress】为网站底部添加蒲公英飘动特效 张弦先生のchrafz.com
代码如下
|
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 |
<!--张弦先生のchrafz.com--> <div class="dandelion"> <span class="smalldan"></span> <span class="bigdan"></span> </div> <style type="text/css"> @media screen and (max-width:600px){ .dandelion{display: none !important;} } .dandelion .smalldan { width: 36px; height: 60px; left: 88px; background-position: 0 -90px; border: 0px solid red; } .dandelion span { -webkit-animation: ball-x 3s linear 2s infinite; -moz-animation: ball-x 3s linear 2s infinite; animation: ball-x 3s linear 2s infinite; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; transform-origin: bottom center; } .dandelion span { display: block; position: fixed; z-index:9999999999; bottom: 0px; background-image: url(http://www.chrafz.com/pgy.png); background-repeat: no-repeat; _background: none; } .dandelion .bigdan { width: 64px; height: 115px; left: 41px; background-position: -86px -36px; border: 0px solid red; } @keyframes ball-x { 0% { transform:rotate(0deg);} 25% { transform:rotate(5deg); } 50% { transform:rotate(0deg);} 75% { transform:rotate(-5deg);} 100% { transform:rotate(0deg);} } @-webkit-keyframes ball-x { 0% { -webkit-transform:rotate(0deg);} 25% { -webkit-transform:rotate(5deg); } 50% { -webkit-transform:rotate(0deg);} 75% { -webkit-transform:rotate(-5deg);} 100% { -webkit-transform:rotate(0deg);} } @-moz-keyframes ball-x { 0% { -moz-transform:rotate(0deg);} 25% { -moz-transform:rotate(5deg); } 50% { -moz-transform:rotate(0deg);} 75% { -moz-transform:rotate(-5deg);} 100% { -moz-transform:rotate(0deg);} } </style> |
下载附件替换图片地址http://www.chrafz.com/pgy.png
附件下载
[reply]链接: https://pan.baidu.com/s/1nvMxi69 密码: r7mt[/reply]
评论1