共计 1387 个字符，预计需要花费 4 分钟才能阅读完成。

复制粘贴

更换图片链接

放到底部就行了

<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;

}

.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>