之前用animate动画都是写一写样式,要不连续让图片旋转,要不就是hover时,让元素从边缘缓慢飘到中央。
今天,写一个让类似轮播图上下翻转的样式。
页面代码:
<!-- danmu -->
<div class="danmu">
<span class="danmuOne">吴女士已经预约成功 3秒前</span><br>
<span class="danmuOne">赵女士已经预约成功 10秒前</span><br>
<span class="danmuOne">钱先生已经预约成功 12秒前</span><br>
<span class="danmuOne">孙女士已经预约成功 15秒前</span><br>
<span class="danmuOne">李先生已经预约成功 18秒前</span><br>
<span class="danmuOne">胡先生已经预约成功 21秒前</span><br>
<span class="danmuOne">王女士已经预约成功 30秒前</span><br>
</div>
样式代码:
/* danmu */
.danmu{
width: 750/75rem;
padding: 40/75rem 0;
margin:0 auto;
position:fixed;
bottom:98/75rem;
left:0;
right:0;
z-index: 9999;
}
.danmu .danmuOne{
display: inline-block;
height: 60/75rem;
font-size: 30/75rem;
color:#ffffff;
background: rgba(0,0,0,0.8);
border-radius: 30/75rem;
padding: 0/75rem 60/75rem 0/75rem 30/75rem;
line-height: 60/75rem;
position: absolute;
bottom:0%;
opacity: 0;
}
.danmu .danmuOne.donghua{
animation: theanimation 3s alternate;
-webkit-animation: theanimation 3s alternate ;
-moz-animation: theanimation 3s alternate ;
-o-animation: theanimation 3s alternate ;
-ms-animation: theanimation 3s alternate ;
}
@keyframes theanimation{
0% {bottom:0%;opacity:0;}
10% {bottom:15%;opacity:0.5;}
20% {bottom:30%;opacity:0.8;}
40% {bottom:40%;opacity:1;}
50% {bottom:40%;opacity:1;}
60% {bottom:40%;opacity:1;}
70% {bottom:40%;opacity:1;}
80% {bottom:40%;opacity:1;}
100% {bottom:100%;opacity:0;}
}
@-webkit-keyframes theanimation{
0% {bottom:0%;opacity:0;}
10% {bottom:15%;opacity:0.5;}
20% {bottom:30%;opacity:0.8;}
40% {bottom:40%;opacity:1;}
50% {bottom:40%;opacity:1;}
60% {bottom:40%;opacity:1;}
70% {bottom:40%;opacity:1;}
80% {bottom:40%;opacity:1;}
100% {bottom:100%;opacity:0;}
}
@-moz-keyframes theanimation{
0% {bottom:0%;opacity:0;}
10% {bottom:15%;opacity:0.5;}
20% {bottom:30%;opacity:0.8;}
40% {bottom:40%;opacity:1;}
50% {bottom:40%;opacity:1;}
60% {bottom:40%;opacity:1;}
70% {bottom:40%;opacity:1;}
80% {bottom:40%;opacity:1;}
100% {bottom:100%;opacity:0;}
}
@-o-keyframes theanimation{
0% {bottom:0%;opacity:0;}
10% {bottom:15%;opacity:0.5;}
20% {bottom:30%;opacity:0.8;}
40% {bottom:40%;opacity:1;}
50% {bottom:40%;opacity:1;}
60% {bottom:40%;opacity:1;}
70% {bottom:40%;opacity:1;}
80% {bottom:40%;opacity:1;}
100% {bottom:100%;opacity:0;}
}
@-ms-keyframes theanimation{
0% {bottom:0%;opacity:0;}
10% {bottom:15%;opacity:0.5;}
20% {bottom:30%;opacity:0.8;}
40% {bottom:40%;opacity:1;}
50% {bottom:40%;opacity:1;}
60% {bottom:40%;opacity:1;}
70% {bottom:40%;opacity:1;}
80% {bottom:40%;opacity:1;}
100% {bottom:100%;opacity:0;}
}
逻辑层:
// danmu
function myFunction() {
var danmu = 0;
var danmu_timer = null;
var danmuList = $(".danmu .danmuOne");
danmu_timer = setInterval(function(){
danmu++;
if(danmu>danmuList.length) danmu = 0;
danmuList.eq(danmu).addClass('donghua').siblings().removeClass('donghua');
}, 3500)
}
myFunction();
效果:从图中 0 位置过渡到 1 位置。