分享按钮(QQ,微信,微博等)移入动画效果
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: 0 auto; clear: both; line-height: 18px; color: #999999; 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:0; width: 100px; height: 135px; background: #f48080; position: absolute; left: 0px; top: 0px; z-index: 19; transition:all linear 0.5s; } .servicesBox .serBox .pic1 { width: 100px; height: 100px; text-align: center; position: absolute; top: 43px; z-index: 99; transition:all linear 0.25s; left: 0px; } .servicesBox .serBox .pic2 { width: 100px; height: 100px; text-align: center; position: absolute; top: 43px; left: -100px; z-index: 99; transition:all linear 0.25s; } .servicesBox .serBox .pic2 i{ color:#fff; } .servicesBox .serBox .txt2 { width: 100px; height: 30px; color: #fff; position: absolute; top: 97px; left:100px; z-index: 99; transition:all linear 0.25s; } .servicesBox .serBox .txt1 { width: 100px; height: 30px; color: #999999; position: absolute; top: 97px; left: 0px; z-index: 99; transition:all linear 0.25s; } .servicesBox .serBox .txt1 .tit { color: #666; 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: 0 10px; text-align: center; } .serBox i{ font-size:75px; } .serBox:hover .serBoxOn{ opacity: 1; }
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","0") $(this).children(".txt1").css("left","-100px") $(this).children(".txt2").css("left","0") }) $(".serBox").mouseout(function(){ $(this).children(".pic1").css("left","0"); $(this).children(".pic2").css("left","100px") $(this).children(".txt1").css("left","0") $(this).children(".txt2").css("left","-100px") })