您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 空间与动画

时间：07-14来源：作者：点击数：22

1 空间转换

1.1 位移

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

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      transform: translate3d(50px, 100px, 200px);
      /* transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

1.2 透视

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

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

1.3 空间旋转

Z轴旋转

<!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>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

X轴旋转

<!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

Y轴旋转

<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

1.4 使用transform-style: preserve-3d呈现立体图形

1.5 使用transform-style: preserve-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>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

1.6 3D导航

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            transform: rotateX(-20deg) rotateY(30deg);

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

1.7 空间缩放

/* 测试缩放效果 */
/* transform: scale3d(0.5, 1.1, 2); */

2 动画

2.1 动画的概念

2.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>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!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>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */

            /* 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 */
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!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>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            
        }

        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }


        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.3 表盘案例

<!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>网页时钟</title>
    <style>
        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 8px solid #000;
            border-radius: 50%;
        }

        /* 刻度线 */
        .line {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            width: 3px;
            height: 200px;
            background-color: #ccc;
        }

        /* :nth-child() */
        .line:nth-child(2) {
            transform: translate(-50%) rotate(30deg);
        }

        .line:nth-child(3) {
            transform: translate(-50%) rotate(60deg);
        }

        .line:nth-child(4) {
            transform: translate(-50%) rotate(90deg);
        }
        .line:nth-child(5) {
            transform: translate(-50%) rotate(120deg);
        }
        .line:nth-child(6) {
            transform: translate(-50%) rotate(150deg);
        }

        /* 遮罩层 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            background-color: #fff;
            border-radius: 50%;
        }

        /* 表针 */
        .hour,
        .minute,
        .second {
            position: absolute;
            left: 50%;
            bottom: 50%;
            /* transform: translate(-50%); */
            transform-origin: center bottom;
        }

        .hour {
            width: 6px;
            height: 40px;
            background-color: #000;
            transform: translate(-50%) rotate(45deg);
        }

        .minute {
            width: 4px;
            height: 50px;
            background-color: #000;
            transform: translate(-50%) rotate(90deg);
        }

        .second {
            width: 2px;
            height: 60px;
            background-color: red;
            transform: translate(-50%) rotate(225deg);
            animation: secrotate 60s steps(60) infinite;
        }

        /* 螺丝 */
        .dotted {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background-color: #000;
            border-radius: 50%;
        }

        @keyframes secrotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <!-- 刻度线 -->
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>

        <!-- 遮罩层 -->
        <div class="mask"></div>

        <!-- 表针 -->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>

        <!-- 螺丝 -->
        <div class="dotted"></div>
    </div>
</body>
</html>

2.4 steps逐帧动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2.5 走马灯案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        width: 2000px;
        animation: move 5s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>