网站左下角 小蛇

小世界  (UID: 40) [复制链接]
帖子链接已复制到剪贴板
帖子已经有人评论啦,不支持删除!

1164 7

网站左下角 小蛇

复制粘贴

更换图片链接

放到底部就行了

 

@菜鸟部落  我感觉俩有点多余 就留一个就行了

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

 

嘿嘿嘿
已有评论 ( 7 )
提示:您必须 登录 才能查看此内容。
域名市场
   域名载入中...
创建新帖
自助推广 (点击空位或 这里 添加)
确认删除
确定要删除这篇帖子吗?删除后将无法恢复。
删除成功
帖子已成功删除,页面将自动刷新。
删除失败
删除帖子时发生错误,请稍后再试。