空间转换

<!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 {
    }
  </style>
</head>

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

</html>

View Code

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

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

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

    .box:hover{

    }
  </style>
</head>

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

</html>

View Code

<!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 {

        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

View Code

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

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

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

        .box img:hover {
            
        }
    </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>立体呈现</title>
    <style>
        .cube {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
        }

        .cube div {

            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
        }

        .back {
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

View Code

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 {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
        }

        .navs li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
        }
        
        .navs li a:last-child {
            background-color: orange;
        }

        
    </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>

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>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            
        }

        /* 一. 定义动画：从200变大到600 */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        
    </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>网页时钟</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: rotate 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 rotate {
            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>

animation复核属性

<!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;

            
        }

        .box:hover {
           
        }


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

animation拆写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

    }




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

精灵动画

<!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>

精灵demo

<!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: rotate 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 rotate {
            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>

网页时钟

综合案例

<!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: go 8s linear infinite;
      }

      .box li {
        float: left;
      }

      /* 定义动画 */
      @keyframes go {
        100% {
          transform: translateX(-1400px);
        }
      }

      
    </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>
        <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>

走马灯

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .box {
        width: 100%;
        height: 100%;
        background: url('images/f1_1.jpg') no-repeat top center;
        background-size: cover;
        position: relative;
      }

      .cloud img {
        position: absolute;
        left: 50%;
      }

      .cloud img:nth-child(1) {
        top: 20px;
        margin-left: -260px;
        animation: cloud 2s linear infinite alternate;
      }

      .cloud img:nth-child(2) {
        top: 100px;
        margin-left: 380px;
        animation: cloud 2.5s linear infinite alternate;
      }

      .cloud img:nth-child(3) {
        top: 200px;
        margin-left: -560px;
        animation: cloud 3s linear infinite alternate;
      }

      .balloon {
        position: absolute;
        left: 50%;
        top: 20%;
        margin-left: -390px;
        animation: balloon 1.5s linear alternate infinite;
      }

      .giraffe {
        position: absolute;
        left: 50%;
        margin-left: 160px;
        top: 15%;
      }

      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: text 1s ease forwards;
      }

      .jump_text img {
        position: absolute;
        left: 50%;
        bottom: 42px;
        width: 100px;
      }

      .jump_text img:nth-child(1) {
        margin-left: -390px;
        animation: jump_text 0.8s infinite alternate;
      }

      .jump_text img:nth-child(2) {
        margin-left: -180px;
        animation: jump_text 0.8s 0.2s infinite alternate;
      }

      .jump_text img:nth-child(3) {
        margin-left: 35px;
        animation: jump_text 0.8s 0.4s infinite alternate;
      }

      .jump_text img:nth-child(4) {
        margin-left: 240px;
        animation: jump_text 0.8s 0.6s infinite alternate;
      }

      /* 白云动画 */
      @keyframes cloud {
        0% {
          transform: translateX(0px);
        }

        100% {
          transform: translateX(40px);
        }
      }

      /* 热气球动画 */
      @keyframes balloon {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 跳动文字 */
      @keyframes jump_text {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 文字 */
      /* 注意：因为transform是复合属性，所以我们要重新申明一遍translate */
      @keyframes text {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }
        20% {
          transform: translate(-50%, -50%) scale(0);
        }

        40% {
          transform: translate(-50%, -50%) scale(1.4);
        }

        70% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 白云 -->
      <div class="cloud">
        <img src="images/yun1.png" />
        <img src="images/yun2.png" />
        <img src="images/yun3.png" />
      </div>

      <!-- 热气球 -->
      <div class="balloon">
        <img src="images/san.png" />
      </div>

      <!-- 长颈鹿 -->
      <div class="giraffe">
        <img src="images/lu.png" />
      </div>

      <!-- 文字 -->
      <div class="text">
        <img src="images/font1.png" />
      </div>

      <!-- 跳动文字 -->
      <div class="jump_text">
        <img src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
      </div>
    </div>
  </body>
</html>

全面出游

posted on 2022-03-26 22:45 编程之路任重道远阅读(48) 评论(0) 收藏举报

刷新页面返回顶部

公告