前言
眼尖的你使用宽度大于800PX的设备访问本站的时候,肯定发现了本站左侧底部的蒲公英飘动,这个特效是不是很有感觉,带给你夏至将去,秋风将来的感觉。如果你喜欢也可以给自己的博客DIY上这个特效。
代码
<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(图片地址); 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>
请下载图片附件,然后将代码中的“图片地址”改成图片对应URL。
此处为隐藏的内容
发表评论并刷新,方可查看
1F
登录回复
六六六六六六六六六六
2F
登录回复
看一下
3F
登录回复
看看
4F
登录回复
咋用的
5F
登录回复
6666厉害
6F
登录回复
look看看
7F
登录回复
看见的骄傲是件大事
8F
登录回复
看看
9F
登录回复
篇博客只简单说下基本用法,以及如