前端-css3，旋转木马效果

CSS3旋转木马效果3d+动画

tl110110tl

451人浏览 · 2022-05-01 15:13:59

tl110110tl · 2022-05-01 15:13:59 发布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 为了产生透视效果，先加个眼睛,此眼距离屏幕2000px */
            perspective: 2000px;
        }
        
        @keyframes moverotate {
            to {
                transform: rotateY(360deg);
            }
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            /* 子元素以3d形式展示 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            /* 鼠标悬停则停止动画 */
            animation-play-state: paused;
        }
        
        img {
            vertical-align: top;
        }
        
        .box {
            width: 300px;
            height: 200px;
            position: relative;
            margin: 150px auto;
            background-color: pink;
            /* 动画，12秒执行周期，线性运动，一直运动 */
            animation: moverotate 12s linear infinite;
        }
        
        .showpic {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            /* 子元素以3d形式展示 */
            transform-style: preserve-3d;
        }
        /* 此动画效果，是6张图作为外圈显示，所以每个图距离上一张图旋转60° */
        
        .showpic:nth-child(1) {
            transform: translateZ(400px);
        }
        
        .showpic:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        .showpic:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        .showpic:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }
        
        .showpic:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }
        
        .showpic:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }
        
        .showpic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="showpic"><img src="../img/ys1.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys2.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys3.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys5.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys6.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys7.webp" alt=""></div>
        <div class="showpic"><img src="../img/ys4.png" alt=""></div>
    </div>
</body>

</html>

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体—人工智能工作流与人工智能智能体：真正的区别是什么？

本文探讨了人工智能工作流与智能体的核心区别。工作流是静态、可预测的执行序列（如预处理→嵌入→搜索→总结），适合批处理作业；而智能体能动态感知环境、自主决策（感知→推理→决策循环），具备适应性和工具选择能力。关键差异在于：工作流遵循固定路径，智能体则能根据目标调整策略。架构上，工作流使用Airflow等工具，智能体依赖LangChain等框架。智能体的自主性使其更适用于动态环境，代表下一代AI应用方