【JavaWeb】CSS实现旋转木马轮播图

去码头整点薯条⁢⁢⁢⁡

已于 2023-07-17 08:58:57 修改

阅读量1.2k

点赞数 4

文章标签： css 前端 javascript

于 2023-07-16 14:53:28 首次发布

本文链接：https://blog.csdn.net/TechnicalXiaobai/article/details/131750419

版权

实现效果

代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            transition: all 0.5s linear;

        }

        @font-face {
            font-family: aaa;
            src: url("index.ttf");
        }

        body {
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
            background: #000;
            perspective: 1500px;
        }

        .container {
            width: 350px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            animation: action 30s linear infinite;
            animation-play-state: paused;
        }

        .container .item {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-box-reflect: below 15px linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3))
        }

        .container .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .container .item:nth-child(1) {
            transform: translateZ(500px);
        }

        .container .item:nth-child(2) {
            transform: rotateY(60deg) translateZ(500px);
        }

        .container .item:nth-child(3) {
            transform: rotateY(120deg) translateZ(500px);
        }

        .container .item:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
        }

        .container .item:nth-child(5) {
            transform: rotateY(240deg) translateZ(500px);
        }

        .container .item:nth-child(6) {
            transform: rotateY(300deg) translateZ(500px);
        }

        @keyframes action {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        .container:hover {
            animation-play-state: running;
        }

        .container:hover .item {
            box-shadow: 0 0 15px 10px white;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"><img src="1.jpg" alt=""></div>
        <div class="item"><img src="2.jpg" alt=""></div>
        <div class="item"><img src="3.jpg" alt=""></div>
        <div class="item"><img src="4.jpg" alt=""></div>
        <div class="item"><img src="5.jpg" alt=""></div>
        <div class="item"><img src="6.jpg" alt=""></div>
    </div>
</body>

</html>

解释：

这段代码是一个简单的 HTML、CSS 和 JavaScript 的组合，用于创建一个在鼠标悬停时旋转的3D图片轮播效果。下面是代码的中文解释：

<head>: 这是HTML文档的头部部分，用于包含关于文档的元数据和引用外部资源，例如CSS和字体文件。
<meta charset="UTF-8">: 这个 meta 标签指定了文档使用的字符编码为 UTF-8，确保网页中的文本能够正确显示各种字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 这个 meta 标签定义了视口的设置，使页面能够根据设备宽度自动调整缩放，保证在移动设备上能够正确显示。
<title>Document</title>: 这个标签设置了文档的标题，将显示在浏览器的标签页或窗口标题栏上。
<style>: 这是内联样式的标签，用于在HTML文档中定义CSS样式。
* {...}: 这是一个CSS选择器，设置了所有元素的padding和margin为0，以及所有属性变化过程的过渡效果为0.5秒线性过渡。
@font-face {...}: 这是一个CSS规则，定义了名为 "aaa" 的字体，通过引用一个名为 "index.ttf" 的字体文件来实现。
body {...}: 这个样式设置了body元素的样式，包括将内容垂直和水平居中，设置背景颜色为黑色，以及设置3D透视效果。
.container {...}: 这个样式设置了一个名为 "container" 的容器元素的样式，宽度为350px，高度为200px，使用3D变换效果，并且定义了一个名为 "action" 的动画，让容器在30秒内无限循环地旋转。
.container .item {...}: 这个样式设置了容器中每个子项（item）的样式，每个子项包含一个图片，使用绝对定位来覆盖在容器上，同时设置了一个镜像效果。
.container .item img {...}: 这个样式设置了每个图片的样式，让图片填满每个子项，并且根据需要裁剪或缩放图片。
.container .item:nth-child(n) {...}: 这些样式设置了每个子项在3D空间中的位置，通过3D旋转和平移来分布在一个圆环上，形成3D轮播效果。
@keyframes action {...}: 这个CSS规则定义了名为 "action" 的动画，从0度旋转到360度，实现了容器的旋转效果。
.container:hover {...}: 这个样式设置了当鼠标悬停在容器上时，动画的播放状态为运行（running），从而触发旋转效果。
.container:hover .item {...}: 这个样式设置了当鼠标悬停在容器上时，每个子项的阴影效果，形成类似高亮的效果。