3d时空隧道效果代码

最新推荐文章于 2024-05-30 16:18:48 发布

༨Rꫀꪖᦔᵧₒᵤ11

最新推荐文章于 2024-05-30 16:18:48 发布

阅读量185

点赞数

分类专栏：效果图文章标签： 3d css css3

本文链接：https://blog.csdn.net/weixin_69821704/article/details/127804069

版权

效果图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如下效果：

<!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>3d动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        ul {
            position: relative;
            width: 100px;
            height: 100px;
            /* background-color: #096; */
        }
        li {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            border: 1px solid orange;
            filter: hue-rotate(calc(14deg * var(--i)));
            border-radius: 40px 20px 60px 50px;
            transform-style: preserve-3d;
            animation: move 5s linear infinite;
            /* 动画延迟 */
            animation-delay: calc(-1s * var(--i));

        }
        /* 3d动画  搭建 3d舞台   旋转  靠近（移动）*/
        @keyframes move {
            0% {
                transform: perspective(1000px) rotate(0) translateZ(0);
            }
            100% {
                transform: perspective(1000px) rotate(360deg) translateZ(1000px); 
            }
        }
    </style>
</head>
<body>
    <ul>
        <li style="--i:1"></li>
        <li style="--i:2"></li>
        <li style="--i:3"></li>
        <li style="--i:4"></li>
        <li style="--i:5"></li>
        <li style="--i:6"></li>
        <li style="--i:7"></li>
        <li style="--i:8"></li>
        <li style="--i:9"></li>
        <li style="--i:10"></li>
        <li style="--i:11"></li>
        <li style="--i:12"></li>
        <li style="--i:13"></li>
        <li style="--i:14"></li>
        <li style="--i:15"></li>
        <li style="--i:16"></li>
        <li style="--i:17"></li>
        <li style="--i:18"></li>
        <li style="--i:19"></li>
        <li style="--i:20"></li>
        <li style="--i:21"></li>
        <li style="--i:22"></li>
        <li style="--i:23"></li>
        <li style="--i:24"></li>
        <li style="--i:25"></li>
    </ul>
</body>
</html>