
将下面的代码放到:子比主题–>>自定义底部HTML代码即可,图片我已经写进去了,如果有其他的图片可以换上代码里面的图片
<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(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Zo5yKU1QbImtc8DhF_!!2210123621994.gif);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 240px;
height: 240px;
left: 41px;
background-position: center center;
background-size: 100% 100%; /* 确保背景图片完全覆盖容器 */
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>
THE END






![子比网站美化 – 顶部加载进度条[网站进度条]-雪诺印象](https://www.xnyx.cc/wp-content/uploads/2025/02/23c22bf1-f749-48c0-80ae-c4705961c7b8-800x58.png)








暂无评论内容