1.展开收起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 展开收起 </title>
<style>
.m-list { background-color: #fff; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; overflow: hidden; }
.m-list .hd { position: relative; z-index: 10; height: 40px; line-height: 40px; background-color: #fff; cursor: pointer; }
.m-list .tit { font-size: 14px; margin: 0; }
.m-list .more { -webkit-transform: rotate(0deg); transform: rotate(0deg); float: right; width: 40px; height: 40px; text-align: center; color: #ccc; font-size: 12px; }
.m-list .bd { height: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); border-top: 1px #e0e0e0 dashed; overflow: hidden; }
.m-list .hd.active + .bd { height: auto; transform: translateY(0); padding: 10px 0; }
.m-list .hd.active .more { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.m-list .more, .m-list .bd { -webkit-transition: all 1s; transition: all 1s; }
</style>
</head>
<body>
<div class="m-list J_List">
<div class="hd active">
<span class="more">▲</span>
<h2 class="tit">点我展开/收起</h2>
</div>
<div class="bd">
世界那么大，我想去看看~<br/>
世界那么大，我想去看看~<br/>
世界那么大，我想去看看~<br/>
世界那么大，我想去看看~<br/>
</div>
</div>
世界不是你想看，想看就能看 - -
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>
$(‘.J_List .hd‘).on(‘click‘, function(){
$(this).toggleClass(‘active‘);
});
</script>
</body>
</html>
2.TAB导航动画切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> TAB导航动画切换 </title>
<style>
.m-tab2 {
position: relative;
overflow: hidden;
background-color: #f0f6f8
}
.m-tab2 .item {
float: left;
text-align: center;
height: 40px;
line-height: 40px;
border-top: 1px #e0e0e0 solid;
border-bottom: 1px #e0e0e0 solid;
font-size: 14px;
color: #333;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.m-tab2 .item:not(:first-child) {
border-left: 1px #e0e0e0 solid
}
.m-tab2 .active {
background-color: #fff;
color: #fe6601
}
.m-tab2 .scrollbar {
position: absolute;
z-index: 10;
left: 0;
bottom: 0;
height: 2px;
background-color: #fe6601;
-webkit-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out
}
.m-tab2 .item:nth-of-type(1).active ~ .scrollbar {
transform: translateX(0);
-webkit-transform: translateX(0)
}
.m-tab2 .item:nth-of-type(2).active ~ .scrollbar {
transform: translateX(100%);
-webkit-transform: translateX(100%)
}
.m-tab2 .item:nth-of-type(3).active ~ .scrollbar {
transform: translateX(200%);
-webkit-transform: translateX(200%)
}
.m-tab2 .item:nth-of-type(4).active ~ .scrollbar {
transform: translateX(300%);
-webkit-transform: translateX(300%)
}
.m-tab2 .item:nth-of-type(5).active ~ .scrollbar {
transform: translateX(400%);
-webkit-transform: translateX(400%)
}
.m-tab2 .item:nth-of-type(6).active ~ .scrollbar {
transform: translateX(500%);
-webkit-transform: translateX(500%)
}
.wb50 { width: 50%; }
</style>
</head>
<body>
<div class="m-tab2 J_Tab">
<a class="item wb50 active" href="javascript:;">栏目1</a>
<a class="item wb50" href="javascript:;">栏目2</a>
<i class="scrollbar wb50"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>
$(‘.J_Tab .item‘).on(‘click‘, function(){
$(this).addClass(‘active‘).siblings(‘.item‘).removeClass(‘active‘);
});
</script>
</body>
</html>
3.列表动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 列表动画 </title>
<style>
.list { height: 100px; line-height: 100px; text-align: center; margin-bottom: 10px; background-color: #ccc; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; }
.anim-slide:nth-of-type(1) {
-webkit-animation: slide .5s ease 0s backwards;
animation: slide .5s ease 0s backwards
}
.anim-slide:nth-of-type(2) {
-webkit-animation: slide .5s ease .1s backwards;
animation: slide .5s ease .1s backwards
}
.anim-slide:nth-of-type(3) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}
.anim-slide:nth-of-type(4) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}
.anim-slide:nth-of-type(5) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}
.anim-slide:nth-of-type(6) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translate3d(0,32px,0);
transform: translate3d(0,32px,0)
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translate3d(0,32px,0);
transform: translate3d(0,32px,0)
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}
</style>
</head>
<body>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
</body>
</html>
待续...
时间： 2024-09-30 02:09:27