wordpress脚本代码特效css动态效果|鼠标点击|蒲公英|灯笼|蜘蛛网
在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力，而通常情况下，实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果，但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎SEO优化呢？今天姜成seo给大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码，将代码加到网站底部模版文件(一般为foot.htm或footer.php)里即可实现效果，此外，如果想让首页代码精简一点也可以跟姜成seo博客一样将里面的文件写到你的CSS文件里来调用，实现的效果一样。
弊端：这个特效只适合初建站的朋友使用，因为一旦访问用户多的话会使cpu飙升！
代码如下：
查看源码打印代码帮助
<script>
//js蜘蛛网吸附鼠标移动背景特效
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<!--2蒲公英-->
<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(https://www.byy3.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>
//直接在footer.php文件中的<?php wp_footer(); ?>上方添加如下代码//因为要用到jQuery包，如果页面没有导入需要手动定义导入jquery包，如下代码
//<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">/* 鼠标点击弹字特效 */var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) {var a = new Array("你好", "泓源视野","?");var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length;var x = e.pageX, y = e.pageY; $i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651" }); $("body").append($i); $i.animate({"top": y - 180,"opacity": 0 }, 1500,function() { $i.remove(); }); });});</script><script type="text/javascript">
/* 鼠标点击特效 每次点击字体颜色不同*/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("萌萌", "Apprentissage", "hello", "how are you?", "blender", "LL_Française", "LL_Chinoise" ,"LL_Anglaise", "Python", "Dessin", "A L'École", "LearnPath");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX;
var y = e.pageY;
var icolora = new Array("#FF4C33", "#FF8F33", "#FFF233", "#65FF33", "#33FFC6", "#33CFFF", "#333BFF" ," #B933FF", "#F633FF", " #FF33D3", "#FF3374", "#D9D919");
$i.css({
"z-index": 9999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": icolora[a_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>最后泓源视野再介绍一个背景的特效,wordpress现成的插件
插件名称 canvas-nest佛祖保佑
<!-- 南无本师释迦侔尼佛 南无阿弥陀佛 南无观世音菩萨 _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / \\||| : |||// \ / _||||| -:- |||||- \ | | \\\ - /// | | | \_| ''\---/'' | | \ .-\__ - ___/-. / ___. .</span><span class="hljs-string"><span class="com">' /--.--\ . . __ ."" '< `.___\_<|>_/___.' >'"". | | : - \.;\ _ /;./ - : | | \ \ -. \_ __\ /__ _/ .- / / ======-.____-.___\_____/___.-`____.-'====== `=---=' 佛祖保佑 网站正常 流量上涨 权重上升 权重上升 权重上升 泓源视野&www.byy3.com --> 
