CSS动画（轮播图）

最新推荐文章于 2024-07-31 16:59:37 发布

写代码的大学生

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量852

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139607636

版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa78enaFEibNNCoXO9Hr2PI7boFTRgZHl3icicXwzLGLTQPxClhQAQiabWL41pTOQLLwgOBlbGrzq1Rwtw/640?wx_fmt=gif&from=appmsg&wxfrom=13

轮播图是一种常见的视觉元素，用于展示图片、信息或故事。CSS轮播图动画通过平滑的过渡效果和动态的视觉表现，极大地增强了轮播图的吸引力和用户体验。本文将探讨如何使用CSS来创建一个响应灵敏、动画流畅的轮播图，让网站内容的展示更加生动和有趣。

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>轮播图</title>  
    <link rel="stylesheet" type="text/css" href="6_11.css">  
</head>  
<body>  
<div class="g-container">  
    <ul style="--s: 4">  
        <li>  
            <img src="./1.png">  
        </li>  
        <li>  
            <img src="./2.png">  
        </li>  
        <li>  
            <img src="./3.png">  
        </li>  
        <li>  
            <img src="./4.png">  
        </li>  
  
        <!--末尾补一个首尾数据-->  
        <li>  
            <img src="./1.png">  
        </li>  
    </ul>  
</div>  
</body>  
</html>

CSS

* {  
    padding: 0;  
    margin: 0;  
}  
  
li {  
    list-style: none;  
}  
  
body,  
html {  
    width: 100%;  
    height: 100%;  
    display: flex;  
}  
  
:root {  
    --w: 400;  
    --speed: 2s;  
}  
  
.g-container {  
    width: 400px;  
    margin: auto;  
    height: 240px;  
    line-height: 240px;  
    font-size: 20px;  
    background: #673ab7;  
    color: #fff;  
    overflow: hidden;  
    border: 2px solid #766c6c;  
}  
  
ul {  
    display: flex;  
    flex-wrap: nowrap;  
}  
  
ul li {  
    flex-shrink: 0;  
    width: 100%;  
    height: 100%;  
    box-sizing: border-box;  
}  
  
ul li img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  
  
ul {  
    animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;  
}  
  
ul li {  
    white-space: nowrap;  
    cursor: pointer;  
    animation: move1 calc(var(--speed)) infinite;  
}  
  
@keyframes move {  
    0% {  
        transform: translate(0, 0px);  
    }  
  
    100% {  
        transform: translate(calc(var(--s) * var(--w) * -1px), 0);  
    }  
}  
  
@keyframes move1 {  
    0% {  
        transform: translate(0, 0px);  
    }  
  
    80%,  
    100% {  
        transform: translate(calc(var(--w) * -1px), 0);  
    }  
}

关键技术点如下：

Flexbox布局：
ul { display: flex; flex-wrap: nowrap; }：使用flex布局来水平排列列表项，并禁止换行。
ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; }：设置列表项不收缩，宽高为100%，并使用box-sizing: border-box;来包含边框和内边距。
图片样式：
ul li img { width: 100%; height: 100%; object-fit: cover; }：使图片占满整个列表项，并使用object-fit: cover;来保证图片的封面效果。
动画效果：
1. ul 和 ul li 的动画使用了animation属性，分别命名为move和move1，并使用了CSS变量--speed和--s来控制动画的速度和步数。
2. @keyframes move 和 @keyframes move1：定义了两个关键帧动画，分别用于整个列表和单个列表项的移动。
无限循环：在ul中末尾补了一个首尾数据，结合动画的步骤（steps(var(--s))）和无限循环（infinite），实现了无缝滚动效果。