本文为转载，喜欢的可以试试，先看看效果图：

WordPress博客美化：给你的网站加个蒲公英特效

本文为转载，喜欢的可以试试，先看看效果图：

 

方法一： 直接将下面的代码添加到网站的</body>之前，通常都是footer.php文件中修改

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
63
64
<!— 网站底部蒲公英特效开始 —>
<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;
}
<!– www.yeyulingfeng.com –>
.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>
<!— 网站底部蒲公英特效结束 —>

方法二：相对上面的代码进行了整理，把CSS样式分开加载，有利于提高网站访问速度

CSS代码–添加到网站主题CSS文件中，通常是main.css或者style.css文件中修改

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
/*左下角蒲公英*/
.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: bottombottom center;
–moz–transform–origin: bottombottom center;
transform–origin: bottombottom center;
}
.dandelion span {
display: block;bottom:0px;
position: fixed;
z–index:9999999999;
bottombottom: 0px;
background–image: url(img/pugongying.png);
background–repeat: no–repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 47px;
background–position: –86px –36px;
border: 0px solid red;
}
@media screen and (max–width:600px){
.dandelion{display: none !important;}
}
@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);}
}

再将以下代码添加至网站的</body>之前

1
2
3
4
<div class=“dandelion”>
<span class=“smalldan”></span>
<span class=“bigdan”></span>
</div>

以上两种方法均能在网站左下角实现蒲公英特效，最后附上代码中需要的图片素材。鼠标右键下载，上传至网站目录，把图片路径或地址加到以上代码中，修改后刷新浏览器缓存即可看到效果了。

夜河资源网提供的所有内容仅供学习与交流。通过使用本站内容随之而来的风险以及法律责任与本站无关，所承担的法律责任由使用者承担。
一、如果您发现本站侵害了相关版权，请附上本站侵权链接和您的版权证明一并发送至邮箱：yehes#qq.com（#替换为@）我们将会在五天内处理并断开该文章下载地址。
二、本站所有资源来自互联网整理收集，全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。
三、根据署名-非商业性使用-相同方式共享 (by-nc-sa) 许可协议规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。
四、基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。
五、根据二〇〇二年一月一日《计算机软件保护条例》规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可不经软件著作权人许可，无需向其支付报酬！
六、鉴此，也望大家按此说明转载和分享资源！本站提供的所有信息、教程、软件版权归原公司所有，仅供日常使用，不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！