图片的移动,轮播的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
        }
    }
  一个函数就实现了图片的轮播和闪烁,是不是很酷,如果有什么问题,欢迎指出哦~

京公网安备 11010502036488号