ps:最近写的很多博客都是在以前在项目里写过的,之所以现在写出来,最大的目的就是希望自己以后用到的时候比较容易找,而且现在再写一遍,有助于加深印象!

很简单的效果,说先实现方式:

1.图标来自 阿里巴巴矢量图标库 没用过的可以试下,各式各样的图标,非常好用

2.初始每个分享框左右两侧都有一个隐藏的图标,和隐藏的文字

3.js操作鼠标移入时,图标和文字移动,将隐藏的显示,显示的隐藏

4.css3的transition

先看下效果吧:

1这是鼠标未移入时

2.鼠标移入(动画效果演示不了。。。

代码如下:

css:

 @font-face {
font-family: 'iconfont'; /* project id 219179 */
src: url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.eot');
src: url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.eot?#iefix') format('embedded-opentype'),
url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.woff') format('woff'),
url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.ttf') format('truetype'),
url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.servicesBox {
width: 1000px;
height: 270px;
margin: auto;
clear: both;
line-height: 18px;
color: #;
font-size: 12px;
}
.servicesBox .serBox {
cursor: pointer;
border: 1px solid #fff;
display: inline;
width: 100px;
height: 135px;
float: left;
overflow: hidden;
background-color: #f7f7f7;
position: relative;
}
.servicesBox .serBoxOn {
font-family: "微软雅黑";
opacity:;
width: 100px;
height: 135px;
background: #f48080;
position: absolute;
left: 0px;
top: 0px;
z-index: ;
transition:all linear .5s;
}
.servicesBox .serBox .pic1 {
width: 100px;
height: 100px;
text-align: center;
position: absolute;
top: 43px;
z-index: ;
transition:all linear .25s;
left: 0px;
}
.servicesBox .serBox .pic2 {
width: 100px;
height: 100px;
text-align: center;
position: absolute;
top: 43px;
left: -100px;
z-index: ;
transition:all linear .25s;
}
.servicesBox .serBox .pic2 i{
color:#fff;
}
.servicesBox .serBox .txt2 {
width: 100px;
height: 30px;
color: #fff;
position: absolute;
top: 97px;
left:100px;
z-index: ;
transition:all linear .25s;
}
.servicesBox .serBox .txt1 {
width: 100px;
height: 30px;
color: #;
position: absolute;
top: 97px;
left: 0px;
z-index: ;
transition:all linear .25s;
}
.servicesBox .serBox .txt1 .tit {
color: #;
line-height: 30px;
}
.servicesBox .serBox span.tit {
font-size: 16px;
display: block;
text-align: center;
} .servicesBox .serBox .txt2 .tit{
color:#fff;
line-height: 30px;
font-weight:bold;
}
.servicesBox .serBox p {
padding: 10px;
text-align: center;
}
.serBox i{
font-size:75px;
}
.serBox:hover .serBoxOn{
opacity: ;
}

html

<div class="servicesBox">
<div class="serBox"> <div class="serBoxOn"></div> <div class="pic1" > <i class="iconfont"></i> </div> <div class="pic2"> <i class="iconfont"></i> </div> <div class="txt1"> <span class="tit">QQ</span></div> <div class="txt2"><span class="tit">QQ</span></div> </div>
<div class="serBox"> <div class="serBoxOn"></div> <div class="pic1" > <i class="iconfont"></i> </div> <div class="pic2" > <i class="iconfont"></i> </div> <div class="txt1" > <span class="tit">微博</span></div> <div class="txt2" ><span class="tit">微博</span></div> </div>
<div class="serBox"> <div class="serBoxOn"></div> <div class="pic1" > <i class="iconfont"></i> </div> <div class="pic2" > <i class="iconfont"></i> </div> <div class="txt1" > <span class="tit">微信</span></div> <div class="txt2" ><span class="tit">微信</span></div> </div>
</div>

js:

 $(".serBox").mouseover(function(){
$(this).children(".pic1").css("left","100px")
$(this).children(".pic2").css("left","")
$(this).children(".txt1").css("left","-100px")
$(this).children(".txt2").css("left","")
})
$(".serBox").mouseout(function(){
$(this).children(".pic1").css("left","");
$(this).children(".pic2").css("left","100px")
$(this).children(".txt1").css("left","")
$(this).children(".txt2").css("left","-100px")
})

分享按钮(QQ,微信,微博等)移入动画效果的更多相关文章

  1. Oauth2.0 QQ&微信&微博实现第三方登陆

    一.写在前面 目前对于大多数的App或Web网站都支持有第三方登陆这个功能,用户可使用 QQ/ 微信/ 微博 帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户.最近在新项目上刚好用到了,在 ...

  2. 访问量分类统计(QQ,微信,微博,网页,网站APP,其他)

    刚准备敲键盘,突然想起今天已经星期五了,有点小兴奋,一周又这么愉快的结束,又可以休息了,等等..我好像是来写Java博客的,怎么变成了写日记,好吧,言归正传. 不知道大家有没有遇到过这样的需求:统计一 ...

  3. qq 微信 微博 第三方分享

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

  4. 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...

  5. Android仿QQ窗口的抖动的动画效果

    就是仿照QQ窗口的抖动效果,在项目的res下创建anim文件夹,再创建两个xml文件:cycle.xml  . myanim.xml   cycle.xml  :   <?xml version ...

  6. 分享-QQ/微信/微博(环境搭建)

    QQ环境搭建

  7. Python 第三方登录 实现QQ 微信 微博 登录

    本人写的AgentLogin,能快速返回QQ.微信.微博第三方用户名信息,主要用于快速登录 用 pip命令安装 pip install AgentLogin 用法 : 导入这个包 from Agent ...

  8. TP QQ 微信 微博登录

    use Org\Util\QQconnect; use Org\Util\Wechatauth; use Org\Util\SaeTOAuthV2; use Org\Util\SaeTClientV2 ...

  9. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

随机推荐

  1. LeetCode--LinkedList--83.Remove Duplicates from Sorted List(Easy)

    题目地址https://leetcode.com/problems/remove-duplicates-from-sorted-list/ 83. Remove Duplicates from Sor ...

  2. 三分钟快速搭建分布式高可用的Redis集群

    这里的Redis集群指的是Redis Cluster,它是Redis在3.0版本正式推出的专用集群方案,有效地解决了Redis分布式方面的需求.当单机内存.并发.流量等遇到瓶颈的时候,可以采用这种Re ...

  3. 在一段字符串中的指定位置插入html标签,实现内容修改留痕

    客户需求:实现内容修改留痕,并且鼠标移动到元素时,显示修改人和修改时间. (其实呢本人觉得这个如果是静态的页面,或者是后端拼接好的html,都很好实现,如果让前端动态实现就......) 前端实现的方 ...

  4. SpringBoot2.0 @Cacheable 添加超时策略

    SpringBoot2.0 @Cacheable 添加超时策略 逻辑比较简单,废话不多说,直接进入正题: 需求:SpringBoot 利用注解使缓存支持过期时间 (同@Cacheable @Cache ...

  5. 暴力破解-HTTP Basic认证

    0x01 HTTP Basic认证介绍 基本认证 basic authentication ← HTTP1.0提出的认证方法 基本认证步骤: 1. 客户端访问一个受http基本认证保护的资源. 2. ...

  6. 「雕爷学编程」Arduino动手做(14)——倾斜角度模块

    37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践出真知(动手试试)的理念,以学习和交流为目的,这里准备 ...

  7. 【一致性检验指标】Kappa(cappa)系数

    1 定义 百度百科的定义: 它是通过把所有地表真实分类中的像元总数(N)乘以混淆矩阵对角线(Xkk)的和,再减去某一类地表真实像元总数与被误分成该类像元总数之积对所有类别求和的结果,再除以总像元数的平 ...

  8. 【Oracle】CentOS7/CentOS8命令行安装Oracle 11G R2

    写在前面 很长一段时间内,国内互联网公司都在提倡"去IOE",但是很多企业还是愿意为昂贵的Oracle数据库买单,不少读者所在的公司也在用Oracle,很多读者自行安装Oracle ...

  9. 自定义realm实现授权

    对用户和权限封装 更具用户查询已经拥有的角色 实现类 根据用户查询已经拥有的权限

  10. Istio Polit-agent & Envoy 启动流程

    开篇 通过上一篇 Istio Sidecar注入原理 文章可以发现,在应用提交到kubernate部署时已经同时注入了Sidecar应用. 细心的话应该还可以发现,除了注入了istio-proxy应用 ...