HTML css 轮播图效果练习-CSDN博客

本文链接：https://blog.csdn.net/m0_61585359/article/details/121503080

轮播图效果的练习也是之前做的了，今晚重新做几乎忘的差不多了

所以先回顾下轮播图效果实现的理论基础

实现轮播图有两大要点：

1、设置@keyframes 动画名{

form{初始状态}

to{结束状态}

}

2、给轮播元素添加animation属性

animation：动画名称执行时间执行次数（infinite循环）运动形式（steps（5）分步骤执行 linear匀速，默认加速执行）延迟执行时间；

效果图

HTML结构

<body>
    <div class="page">
    <div class="imge">
        <p class="one">1</p>
        <p class="two">2</p>
        <p class="thr">3</p>
        <p class="for">4</p>
        <p class="fiv">5</p>
    </div>
</div>
</body>

css样式

<style>
     *{
         margin: 0;
         padding: 0;
     }
     .page{
         width: 200px;
         height: 200px;
         border:black 5px solid;
         /* 溢出裁剪 */
         overflow: hidden;
         margin: 0 auto;
     }
     .imge{
         width: 1000px;
         height: 200px;
         /* animation :动画名称 时间 播放方式 播放步骤 */
         animation: play 5s infinite steps(5);
     }
     .imge p{
         width: 200px;
         height: 200px;
         float: left;
         text-align: center;
         line-height: 200px;
     }
     .imge .one{
         background: chartreuse;
     }
     .imge .two{
        background: chocolate;
     }
     .imge .thr{
         background: cornflowerblue;
     }
     .imge .for{
         background:pink;
     }
     .imge .fiv{
         background: orange;
     }
     @keyframes play{
         form{margin-left:0px;}
        to{margin-left:-1000px;}
     }

 </style>