创造一只css制作的小宠物 | 沧水的博客

感谢>>@Saber酱<< 提供的可爱的代码

代码如下:

<!-- 底部走动的桌宠 -->
<img id="zhuochong" src="*这*里*填*你*设*的*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=120, //桌宠宽度
 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>
 对于我这种基于wordpress的小站,我是直接插入themes文件夹当前主题目录的index.php文件
顺便一提:
修改主题目录index.php   就是修改首页
                         single.php  就是修改文章页面
                         page.php    就是修改页面页面

这篇文章有人发言喽~

  1. 爱你哦,沧水。虽然我也是男的~

    ACG

    2018/4/27

    @Ta
    #1

发表评论



Copyright 2017 沧水的博客. All Rights Reserved.
湘ICP备17021400号-1托管于腾讯云中国律法保护