• 欢迎访问《源码家园》,本站可以通过Ctrl+F搜索标签搜索你自己的问题,欢迎加入源码家园: QQ群
  • 请勿直接引用本站的图片链接,否则你的文章图片失效勿怪!
  • 博客看到的二维码食用方法:打开手机QQ的右上角那个+的“扫一扫”,扫一下这个二维码就好了,也可以用别的扫描二维码工具直接扫描!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧!

给网站添加类似腾讯微博的左右摇摆蒲公英效果代码

网站源码 小白 1年前 (2017-02-27) 2024次浏览 已收录 7个评论 扫描二维码

直接复制代码放网页底部就好了,wordpress 博客的话可以放在 主题页脚(footer.php) 这个里面!用我博客一样的这个主题的可以放在主题设置里面的底部设置的公共底部那里也行!

步骤:

wordpress 后台-外观-编辑-打开(footer.php),看到里面的代码,最后面的</body>就放在这个的上面就好了!
里面有个图片链接你可以打开链接图片,然后把图片保存下来,然后把图片放在我的网站里面,然后把这个图片链接换成我们自己的图片链接,这样做是为了预防那边的人删除图片,然后我们这边就没有图片显示效果了!
我的博客也放了这个效果,手机横屏和平板电脑,家用电脑都可以看到效果,你可以看一下我的博客底部最左下角!

给网站添加类似腾讯微博的左右摇摆蒲公英效果代码

代码在这里:

 

<style type="text/css">
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
    .dandelion .smalldan {
width: 36px;
height: 60px;
left: 21px;
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(http://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 47px;
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
    0% { transform:rotate(0deg);}
   20% { transform:rotate(5deg); }
   40% { transform:rotate(0deg);}
   60% { transform:rotate(-5deg);}
   80% { transform:rotate(0deg);}
   100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
    0% { -webkit-transform:rotate(0deg);}
   20% { -webkit-transform:rotate(5deg); }
   40% { -webkit-transform:rotate(0deg);}
   60% { -webkit-transform:rotate(-5deg);}
   80% { -webkit-transform:rotate(0deg);}
   100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
    0% { -moz-transform:rotate(0deg);}
   20% { -moz-transform:rotate(5deg); }
   40% { -moz-transform:rotate(0deg);}
   60% { -moz-transform:rotate(-5deg);}
   80% { -moz-transform:rotate(0deg);}
   100% { -moz-transform:rotate(0deg);}
}
</style>

 

 


源码家园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明给网站添加类似腾讯微博的左右摇摆蒲公英效果代码
喜欢 (2)
[2517723188@qq.com]
分享 (0)
小白
关于作者:
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、Javascr ipt、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、Actionscr ipt、Pascal等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP8等系统的开关机!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 失败了.只需要改一下footer的代码吗,然而并没显示....
    黑白配博客2017-09-18 19:29 回复 Windows 8.1 | Chrome 53.0.2785.104
    • 小白
      认真看文章,注意代码放在哪!
      小白2017-09-19 05:28 回复 Linux | Chrome 40.0.2214.89
  2. 蒲公英是棕色的,怎么改成白色 :?:
    miu2017-03-12 13:49 回复 Linux | Chrome 56.0.2924.87
    • 小白
      那个蒲公英就是一个图片
      小白2017-03-12 14:19 回复 Linux | Chrome 40.0.2214.89
    • 小白
      一个图片而已!
      小白2017-09-19 05:27 回复 Linux | Chrome 40.0.2214.89
  3. 博主最近没怎么更新啊,我来转转。
    Feeey个人博客2017-02-28 01:02 回复 Windows 7 | Internet Explorer 9.0
    • 小白
      目前博客的道路我已放弃…现在在研究路由器…研究好,有空的话可能会发上来玩玩而已!
      小白2017-02-28 01:20 回复 Linux | Chrome 40.0.2214.89