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")
})