动画效果制作轮播图

chill_ly

已于 2022-03-27 17:48:40 修改

阅读量239

点赞数

分类专栏：一阶段文章标签： css3 css html

于 2022-03-01 21:09:09 首次发布

本文链接：https://blog.csdn.net/qq_53640252/article/details/123215838

版权

本文介绍了如何利用CSS3制作轮播图动画效果，包括清除默认样式、设置大div、添加图片、子绝父相定位、设置宽高、浮动布局、定义@keyframes动画帧、应用动画及控制动画状态等步骤。

摘要由CSDN通过智能技术生成

首先不需要的样式可以先清除

①设置一个大div

②往大div中加图片 : 可以使用无序列表(ul>li>a>img)

③子绝父相定位 ul （只有先定位，才能实现后面的动画效果）

④给ul设置宽高(宽度必须设置，若不设置宽度li会挤下去，使浮动失效)

⑤给li加浮动

⑥设置动画每一帧的样式 @keyframes 动画名称{ 0%{} 25%{} 100%{}}

⑦应用动画：animation:动画名称执行所需时长(若需设置无限循环：infinite)；（鼠标滑过才有动画加hover上，需要自动轮播就加在ul）

⑧设置鼠标滑过时动画暂停：animation-play-state:paused;

<style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .banner{
            width: 520px;
            height: 280px;
            border: 2px solid #000;
            overflow: hidden;
            position:relative;
        }
        ul{
            width: 2080px;
            height: 280px;
            position:absolute;
            top: 0;