给网站添加一个类似腾讯微博的蒲公英特效,当然你也可以换成其他的玩玩
前言
前几天无意中看到一个仿腾讯微博蒲公英效果的HTML代码,看着挺好玩的,就怕来了,修复了一些问题,今天分享一下,被群里面的朋友崔几次了。。。。。
代码&预览
See the Pen bdedNd by 无法诉说的吟荡 (@) on CodePen
前言
前几天无意中看到一个仿腾讯微博蒲公英效果的HTML代码,看着挺好玩的,就怕来了,修复了一些问题,今天分享一下,被群里面的朋友崔几次了。。。。。
代码&预览
See the Pen bdedNd by 无法诉说的吟荡 (@) on CodePen.
代码使用
上面的代码演示如果你看不懂,那么直接复制以下代码吧,加入主题自定义代码区域吧,Git主题加入底部设置 --自定义代码
<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: 21px; 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://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png); background-repeat: no-repeat; _background: none; } .dandelion .bigdan { width: 64px; height: 115px; left: 47px; background-position: -86px -36px; border: 0px solid red; } @keyframes ball-x { 0% { transform:rotate(0deg);} 20% { transform:rotate(5deg); } 40% { transform:rotate(0deg);} 60% { transform:rotate(-5deg);} 80% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-webkit-keyframes ball-x { 0% { -webkit-transform:rotate(0deg);} 20% { -webkit-transform:rotate(5deg); } 40% { -webkit-transform:rotate(0deg);} 60% { -webkit-transform:rotate(-5deg);} 80% { -webkit-transform:rotate(0deg);} 100% { -webkit-transform:rotate(0deg);} } @-moz-keyframes ball-x { 0% { -moz-transform:rotate(0deg);} 20% { -moz-transform:rotate(5deg); } 40% { -moz-transform:rotate(0deg);} 60% { -moz-transform:rotate(-5deg);} 80% { -moz-transform:rotate(0deg);} 100% { -moz-transform:rotate(0deg);} } </style>
效果预览
-- 完 --