• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

给网站添加类似腾讯微博的蒲公英效果

网络技术 云落 4年前 (2015-05-16) 648次浏览 9个评论 扫描二维码
文章目录[隐藏]

给网站添加一个类似腾讯微博的蒲公英特效,当然你也可以换成其他的玩玩

给网站添加类似腾讯微博的蒲公英效果

前言

前几天无意中看到一个仿腾讯微博蒲公英效果的 HTML 代码,看着挺好玩的,就怕来了,修复了一些问题,今天分享一下,被群里面的朋友崔几次了。。。。。

代码&预览

See the Pen bdedNd by 无法诉说的吟荡 (@) on CodePen.

代码使用

上面的代码演示如果你看不懂,那么直接复制以下代码吧,加入主题自定义代码区域吧,Git 主题加入底部设置 –自定义代码

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

效果预览

预览
-- 完 --
给网站添加类似腾讯微博的蒲公英效果
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:给网站添加类似腾讯微博的蒲公英效果

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:给网站添加类似腾讯微博的蒲公英效果
喜欢 (13)
[sp91@qq.com]
分享 (0)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址