saber酱的抱枕

哀哉京阿尼

05/19
13:46
学习

使用css3动画制作网页底部走动的桌宠

在pc设备上,我的博客底部会有一个saber桌宠走来走去~这个效果大概是三年前博客建立不久就做了,但是当时是用JavaScript的定时器来改变桌宠的位置的。今天我把它用css3动画重做了一遍,效果基本上维持原样。

这次我依然用到了JavaScript,不过JavaScript已经不直接移动桌宠的位置了,它的作用是动态创建animation动画规则,这样桌宠的移动就由css3动画控制了。

其实我改成css3动画本来是想降低我的博客在浏览器里的资源占用,但是改了之后发现效果不明显,看来占用资源大头的另有原因,这个以后再查吧。

单独查看demo

源代码:

<!-- 底部走动的桌宠 -->
<img id="zhuochong" src="/demo/zc.gif">
<style>
	#zhuochong{position: fixed;z-index: 999999;bottom:0;left:-100px;opacity: 0.9;transform:scaleX(-1);animation-direction: alternate;animation-timing-function: linear;}
</style>
<style id="zcCss"></style>
<script type="text/javascript">
	(function () {
		var zc,zcCss,w1,w2,leftStart,leftEnd,speed,time,fx,isfirst;	//预设变量
		document.addEventListener("DOMContentLoaded", function () {// 初始化
			zc=document.querySelector("#zhuochong"),
			zcCss=document.querySelector("#zcCss"),
			w1=document.body.scrollWidth,	//页面宽度
			w2=86,	//桌宠宽度
			leftStart=0-w2,	//左边界
			leftEnd=w1-w2,	//右边界
			speed=100,	//每秒移动多少像素
			time=parseInt(w1/speed),	//动画时长
			fx="r",	//桌宠方向
			isfirst=true;	//是否是第一次执行
			zcmove(fx);	//启动
			zc.addEventListener("animationend", function () {	//动画播放完毕后再启动
				isfirst=false;
				fx==="r"?fx="l":fx="r";
				zcmove(fx);
			});
		});

		function zcmove(fx) {	// 要注意两次的动画名要有区别,不然第二次就不正常了
			if (!isfirst) {	//如果已经不是第一次执行了,则把左边界设置为0(即不走出屏幕外)
				leftStart=0;
			}
			if (fx==="r") {	//向右移动
				zc.style.transform="scaleX(-1)";
				zcCss.innerHTML='@keyframes zcmove{' +
								    'from {left: '+leftStart+'px}' +
								    'to {left: '+leftEnd+'px}' +
								'}';
				zc.style.animationName="zcmove";
				zc.style.animationDuration=time+"s";
			}else if (fx==="l") {	//向左移动
				zc.style.transform="scaleX(1)";
				zcCss.innerHTML='@keyframes zcmove2{' +
								    'from {left: '+leftEnd+'px}' +
								    'to {left: '+leftStart+'px}' +
								'}';
				zc.style.animationName="zcmove2";
				zc.style.animationDuration=time+"s";
			}
		}
	})();
</script>

使用css3动画制作网页底部走动的桌宠