自己动手做一个小动画
动手做一个小动画
@(妙瞳)[html|css|jquery]
制作动画想法
因为很久没写分享的文章了，觉得分享还是很重要的，今天跟大家分享个简单的动画效果，有不足的地方，希望多多指出，谢谢！
今天注意的是使用transition,实现滑动的动画，具体代码可以参考下面贴出来的代码块，假如有疑问的地方，请在评论区提出，谢谢！
由于很久没写了，可能生疏了，有好的建议也可以提出咯。哈哈。
html代码块
<body>
<div class="success-lists">
<ul id="success-img">
<li class="my-transition">
<a href="/www.baidu.com" target="_blank" class="my-transition">
<div class="suc-img-bg my-transition"></div>
<div class="img img1 my-transition">
</div>
<div class="suc-font-w my-transition transition-center">
<div class="suc-name">我是标题1</div>
<div class="suc-uni">我是正文1</div>
<div class="suc-uni-font my-transition">
我是内容1 我是内容1 我是内容1 我是内容1
</div>
</div>
</a>
</li>
<li class="my-transition">
<a href="/www.baidu.com" target="_blank" class="my-transition">
<div class="suc-img-bg my-transition"></div>
<div class="img img2 my-transition">
</div>
<div class="suc-font-w my-transition transition-center">
<div class="suc-name">我是标题2</div>
<div class="suc-uni">我是正文2</div>
<div class="suc-uni-font my-transition">
我是内容2 我是内容2 我是内容2 我是内容2
</div>
</div>
</a>
</li>
<li class="my-transition active">
<a href="/www.baidu.com" target="_blank" class="my-transition">
<div class="suc-img-bg my-transition"></div>
<div class="img img3 my-transition">
</div>
<div class="suc-font-w my-transition transition-center">
<div class="suc-name">我是标题3</div>
<div class="suc-uni">我是正文3</div>
<div class="suc-uni-font my-transition">
我是内容3 我是内容3 我是内容3 我是内容3
</div>
</div>
</a>
</li>
<li class="my-transition">
<a href="/www.baidu.com" target="_blank" class="my-transition">
<div class="suc-img-bg my-transition"></div>
<div class="img img4 my-transition">
</div>
<div class="suc-font-w my-transition transition-center">
<div class="suc-name">我是标题4</div>
<div class="suc-uni">我是正文4</div>
<div class="suc-uni-font my-transition">
我是内容4 我是内容4 我是内容4 我是内容4
</div>
</div>
</a>
</li>
<li class="my-transition">
<a href="/www.baidu.com" target="_blank" class="my-transition">
<div class="suc-img-bg"></div>
<div class="img img5 my-transition">
</div>
<div class="suc-font-w my-transition transition-center">
<div class="suc-name">我是标题5</div>
<div class="suc-uni">我是正文5</div>
<div class="suc-uni-font my-transition">
我是内容5 我是内容5 我是内容5 我是内容5
</div>
</div>
</a>
</li>
</ul>
</div>
</body>
CSS代码块
<style>
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
.transition-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
.my-transition{
transition-duration: .3s;
-moz-transition-property: all;
-moz-transition-duration: .3s;
-moz-transition-timing-function: ease;
-moz-transition-delay: 0;
-o-transition-property: all;
-o-transition-duration: .3s;
-o-transition-timing-function: ease;
-o-transition-delay: 0;
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0;
-ms-transition-property: all;
-ms-transition-duration: .3s;
-ms-transition-timing-function: ease;
-ms-transition-delay: 0;
}
.success-lists{
width:1170px;
margin:0 auto;
overflow:hidden;
position:relative;
height:500px;
}
.success-lists ul{
overflow:hidden;
height:500px;
}
.success-lists ul li{
float:left;
width:195px;
height:500px;
}
.success-lists ul li a{
position:relative;
display:block;
width:195px;
height:500px;
}
.success-lists ul li a .suc-img-bg{
position:absolute;
z-index:2;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
.success-lists ul li a .img{
position:absolute;
z-index:1;
background-size: cover;
}
.success-lists ul li a .suc-font-w{
z-index:3;
color:#fff;
width:220px;
height:90px;
top:75%;
text-align:center;
}
.success-lists ul li a .suc-font-w .suc-name{
font-size:22px;
}
.success-lists ul li a .suc-font-w .suc-uni{
font-size:14px;
margin-top: 5px;
}
.success-lists ul li a .suc-font-w .suc-uni-font{
font-size:16px;
opacity:0;
margin-top: 16px;
}
.img{
width:100%;
height:500px;
}
.img1{
background:url("img1.jpg") no-repeat center center;
}
.img2{
background:url("img2.jpg") no-repeat center center;
}
.img3{
background:url("img3.jpg") no-repeat center center;
}
.img4{
background:url("img4.jpg") no-repeat center center;
}
.img5{
background:url("img5.jpg") no-repeat center center;
}
.success-lists ul li.active{
width:390px;
}
.success-lists ul li.active a{
width:100%;
}
.success-lists ul li.active a .suc-img-bg{
width:100%;
height:100%;
background:rgba(0,0,0,0);
}
.success-lists ul li.active a .img{
position:absolute;
z-index:1;
width:390px;
}
.success-lists ul li.active a .suc-font-w{
width:220px;
height:90px;
color:violet;
}
.success-lists ul li.active a .suc-font-w .suc-uni-font{
display:block;
opacity:1;
color:violet;
}
</style>
js 代码块
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$("#success-img>li").hover(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
</script>
效果图
