移动Web的3D空间转换、动画效果

程序员大臣

已于 2023-06-06 08:59:59 修改

阅读量526

点赞数 4

文章标签：前端 3d html 动画

于 2022-10-06 10:55:26 首次发布

本文链接：https://blog.csdn.net/Moraxz/article/details/127180253

版权

一.3D空间转换

1.绘制一个简单的3D立体小盒子

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 2s;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box .one,
        .box .two {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .box .one {
            transform: translateZ(-100px);
            background-color: black;
        }

        .box .two {
            transform: translateZ(100px);
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

3D小盒子

2.3D导航栏案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: 200px auto;
            list-style: none;
        }

        .nav li {
            position: relative;
            float: left;
            margin-right: 20px;
            width: 120px;
            height: 50px;
        }

        .nav li a {
            /* 开启3D效果 */
            transform-style: preserve-3d;
            display: block;
            width: 120px;
            height: 50px;
            text-decoration: none;
            transition: all 1s;
        }

        .nav li a:hover {
            transform: rotateX(-90deg);
        }

        .nav a span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .nav a span:first-child {
            background-color: green;
            /* 把绿色盒子放前面,前提条件开启了3D */
            transform: translateZ(25px);
        }

        .nav a span:last-child {
            background-color: orange;
            /* 橙色盒子垂直摆放,旋转90度,盒子翻转之后在前面盒子中间需要往上移动y轴向上移动25px就到了顶部 */
            transform: translateY(-25px) rotateX(90deg);
        }
    </style>
</head>
<body>
        <ul class="nav">
            <li>
                <a href="#">
                    <span>首页</span>
                    <span>index</span>
                </a>
            </li>
            <li>
            <a href="#">
                <span>首页</span>
                <span>index</span>
            </a>
            </li>
            <li>
            <a href="#">
                <span>首页</span>
                <span>index</span>
            </a>
            </li>
        </ul>
</body>
</html>

效果如图

这里需要注意提前开启3D效果:transform-style: preserve-3d;

这里的思路是需要把绿色盒子放前面,橙色盒子垂直摆放,旋转90度,盒子翻转之后在前面盒子中间需要往上移动y轴向上移动25px就到了顶部

二.3D的动画效果

1.下面是一个简单的3D小球滚动一圈动画效果

<!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>
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: linear-gradient(black,aqua);
            animation: move 2s linear 0s infinite alternate;
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            25% {
                transform: translate(800px,0) rotateZ(1turn);
            }

            50% {
                transform: translate(800px,400px) rotateZ(2turn);
            }

            75% {
                transform: translate(0,400px) rotateZ(3turn);
            }

            100% {
                transform: translate(0,0) rotateZ(4turn);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.剑客动画

<!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>
        .box {
            width: 140px;
            height: 140px;
            background: url(./images/bg.png) no-repeat;
            animation: run 0.5s steps(12) infinite,move 2s linear forwards;
        }

        /* 定义动画 */
        @keyframes run {

            /* 开始状态 */
            0%{
                background-position: 0 0;
            }

            /* 结束状态 */
            100%{
                background-position: -1680px 0;
            }
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(600px,0);
            }
        }


    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

它的思路是通过一个盒子装精灵图的一张图片来逐帧显示,叫做逐帧动画steps(数字)

3.通过CSS样式制作简易轮播图

<!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>
        .box {
            width: 600px;
            height: 150px;
            border: 10px solid #000;
            margin: 200px auto;
            overflow: hidden;
        }
 
        .box:hover .banner {
            /* 鼠标移入时暂停轮播图 */
            animation-play-state: paused;
        }

        .box .banner {
            width: 2000px;
            /* 调用动画 */
            /* linear为匀速运动
               infinite为无限循环 */
            animation: move 10s linear infinite;
        }

        .box img {
            cursor: pointer;
            float: left;
            width: 200px;
            height: 150px;
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(-1400px,0);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/6.jpg" alt="">
            <img src="./images/7.jpg" alt="">


            <!-- 解决留白问题 -->
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
        </div>
    </div>
</body>
</html>

后期制作轮播图主要还是靠学习js制作,这里面需要注意的是轮播图最后一个页面留白问题

解决方法,在最后留白的地方继续添加前面几张图片(根据轮播图每次最多展示宽度或者张数确定)

比如这个最后最多展示三张图片,所有需要cv前三张图片以保证在录播图循环问题上不会出现留白卡顿现象。

4.动画小案例(通过动画相关属性效仿360首页动画)

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .one img {
            position: absolute;
            left: 50%;
            top: 100px;
            z-index: 1;
            width: 254px;
            height: 254px;
            margin-left: -500px;
            animation: one 4s linear alternate infinite;
        }

        @keyframes one {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform: translate(0,20px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .two img {
            position: absolute;
            left: 50%;
            top: 250px;
            z-index: 1;
            width: 430px;
            height: 430px;
            margin-left: 220px;
            animation: two 8s linear alternate infinite;
        }

        @keyframes two {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform: translate(0,20px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .three img {
            position: absolute;
            left: 50%;
            top: 250px;
            z-index: 1;
            width: 100px;
            height: 100px;
            margin-left: 190px;
            animation: three 20s linear alternate infinite;
        }

        @keyframes three {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform:rotateZ(-30deg);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .four img {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1500px;
            height: 700px;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="one">
        <img src="./素材图片/1.png" alt="">
    </div>

    <div class="two">
        <img src="./素材图片/2.png" alt="">
    </div>

    <div class="three">
        <img src="./素材图片/3.png" alt="">
    </div>

    <div class="four">
        <img src="./素材图片/4.jpg" alt="">
    </div>
</body>
</html>