用CSS在博客园底部加上蒲公英动态效果的实现方法

在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力，

而通常情况下，实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果，

但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎

大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码，将代码加到网站底部模版文件(一般为foot.htm)里即可实现效果，

此外，如果想让首页代码精简一点，将<style></style>里面的文件写到你的CSS文件里来调用，实现的效果一样。

代码实现如下：

<!--蒲公英--><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://www.doubiseo.com/images/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>

您可以考虑给博主来个小小的打赏以资鼓励，您的肯定将是我最大的动力。

作者：落花四月

出处：https://www.cnblogs.com/lxz-1263030049/

关于作者：潜心于网络安全学习。如有问题或建议，请多多赐教！

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

用CSS在博客园底部加上蒲公英动态效果的实现方法相关推荐

用CSS在网站底部加上蒲公英动态效果的实现方法
在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力,而通常情况下,实现动态效果都需要用到JS代码.JS能够实现比较复杂且炫酷的动态效果,但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎 ...
markdown mysql高亮_修改博客园markdown编辑器代码高亮风格的方法
作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式 ...
为博客园博文添加目录的两种方法
准备工作: 确认你的博客有js权限,可以设计界面风格.这个需要跟管理员申请. 方法一:在正文上方直接添加目录 1.把下面的脚本添加到博客后台设置里的"页脚html代码"里头: 1 ...
新sakura博客园皮肤配置,NewSakura
CNblogs-Theme-NewSakura 基于Sakura美化方案改造的博客园样式:NewSakura 如使用了本样式,请给个Star. 文章目录 CNblogs-Theme-NewSakura ...
一个（伪）MaterialDesign风格的博客园皮肤
皮肤长什么样,不用我说,相信各位点进来的看官都能看得一清二楚. 有关其他细节呢,也欢迎各位在我博客里逛逛,帮忙挑挑刺,提提建议. 由于水平有限,暂没能用CSS处理博客园的代码高亮字体,实在是有些遗憾. ...
python博客园_用Python向博客园发布新文章
最近在开发一个博客系统,经常把写的东西放在自己网站的博客上(之前写在Onenote),然后我在博客园也申请了一个博客,就有了同样一篇文章,我需要复制粘贴排版分别提交两次的情况.于是我就想能不能在我的网 ...
CSS浮动(float,clear)通俗讲解- 杨元- 博客园
学习CSS布局主页目录 inline-block 你可以创建很多网格来铺满浏览器.在过去很长的一段时间内使用 float 是一种选择,但是使用 inline-block 会更简单.让我们看下使用这 ...
分享下我的博客园CSS
今天没事瞎折腾博客园,对于HTML,css,js等都是了解一点点. 我用的模板是: 修改后的样式为: \ css代码如下: 1 /* Minification failed. Returning un ...
博客园 CSS 代码定制
@charset "utf-8"; body {font-size: 15px;padding: 0;margin: 0;font-family: "微软雅黑" ...

用CSS在博客园底部加上蒲公英动态效果的实现方法

用CSS在博客园底部加上蒲公英动态效果的实现方法相关推荐

最新文章

热门文章