图片的移动,轮播的html部分:
<img src="2.1.png" style="position:absolute;" class="play">
在css中写入如下代码:
.play {
animation: ma 30s ease-out infinite alternate;
/**/
}
@keyframes ma {
/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/
0%,
20% {
margin-left: 0px;
}
25%,
40% {
margin-left: -1920px;
}
45%,
60% {
margin-left: -3840px;
}
65%,
80% {
margin-left: -5760px;
}
85%,
100% {
margin-left: -7680px;
}
}
实现图片的闪烁,html部分:
<div id="photos" class="play">
css代码:
.play2 {
animation: ma1 1.5s ease-out infinite alternate;
}
@keyframes ma1 {
/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/
0%,
20% {
opacity: 0.2
}
85%,
100% {
opacity: 1.0
}
}
一个函数就实现了图片的轮播和闪烁,是不是很酷,如果有什么问题,欢迎指出哦~