• HTML transform空间转换 CSS animation动画

    空间位移：使用translate实现元素空间位移效果

    语法
    l transform: translate3d(x, y, z);
    l transform: translateX(值);
    l transform: translateY(值);
    l transform: translateZ(值);
    l
    使用 perspective 属性实现 透视 效果
    取值（ 正负 均可）
    l 像素单位数值
    l 百分比
    取值：像素单位数值， 数值一般在 800 – 1200
    Z轴是视线方向，移动效果应该是距离的 远或近 ， 电脑屏幕是平面，默认无法观察远近效果
    perspective只增加近大远小、近实远虚的视觉效果 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>空间位移</title>
    8.     <style>
    9.         body{
    10.             perspective: 200px;
    11.         }
    12.         .box{
    13.             width: 200px;
    14.             height: 200px;
    15.             margin: 100px auto;
    16.             background-color: antiquewhite;
    17.             transition: all 8s;
    18.         }
    19.         .box:hover{
    20.             /* transform: translate3d(50px,100px,200px);  */
    21.             /* transform: translateX(100px);
    22.             transform: translateY(100px); */
    23.             transform: translateZ(-500px);
    24.             transform: translateZ(500px);
    25.             /* transform:translate3d(100px); */
    26.         }
    27.     </style>
    28. </head>
    29. <body>
    30.         <!-- transform: translate3d(x, y, z);-->
    31.  
    32.     <div class="box"></div>
    33. </body>
    34. </html>

    空间旋转rotate

    判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>空间旋转</title>
    8.     <style>
    9.         .box{
    10.             width: 300px;
    11.             margin: 100px auto;
    12.             /* perspective: 1000px; */
    13.         }
    14.         img{
    15.             width: 300px;
    16.             transition: all 2s;
    17.         }
    18.         /* .box img:hover{
    19.             transform: rotateZ(360deg);
    20.         } */
    21.       /*    transform: rotateX(60deg);  X旋转 */
    22.          /*    transform: rotateY(60deg);  Y旋转 */
    23.          /*    transform: rotateY(60deg);  Y旋转 */
    24.         .box img:hover{
    25.             transform: rotateY(-60deg);
    26.         }
    27.     </style>
    28. </head>
    29. <body>
    30.     <div class="box">
    31.         <img src="./images/hero.jpeg" alt="" >
    32.     </div>
    33.     
    34. </body>
    35. </html>

     使用rotate实现元素空间旋转效果

      rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

     x，y，z 取值为0-1之间的数字

    立体呈现

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>立体呈现</title>
    8.     <style>
    9.         .cube {
    10.             position: relative;
    11.             width: 200px;
    12.             height: 200px;
    13.             margin: 100px auto;
    14.             background-color: pink;
    15.             transition: all 2s;
    16.             transform-style: preserve-3d;
    17.         }
    18.  
    19.         .cube div {
    20.             position: absolute;
    21.             left: 0;
    22.             top: 0;
    23.             width: 200px;
    24.             height: 200px;
    25.         }
    26.  
    27.         .front {
    28.             background-color: orange;
    29.             /* 向我走近200px */
    30.             transform: translateZ(200px);
    31.         }
    32.  
    33.         .back {
    34.             background-color: green;
    35.         }
    36.  
    37.         /* cube hover 为了看空间感效果 */
    38.         .cube:hover {
    39.             transform: rotateY(90deg);
    40.         }
    41.     </style>
    42. </head>
    43. <body>
    44.     <div class="cube">
    45.         <div class="front">前面</div>
    46.         <div class="back">后面</div>
    47.     </div>
    48. </body>
    49. </html>

     使用scale实现空间缩放效果

    l 语法
    Ø transform: scaleX(倍数);
    Ø transform: scaleY(倍数);
    Ø transform: scaleZ(倍数);
    Ø transform: scale3d(x, y, z); 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>3D导航</title>
    8.     <style>
    9.         ul {
    10.             margin: 0;
    11.             padding: 0;
    12.             list-style: none;
    13.         }
    14.         
    15.         .navs {
    16.             width: 300px;
    17.             height: 40px;
    18.             margin: 50px auto;
    19.         }
    20.         
    21.         .navs li {
    22.             position: relative;
    23.             float: left;
    24.             width: 100px;
    25.             height: 40px;
    26.             line-height: 40px;
    27.             transition: all .5s;
    28.             transform-style: preserve-3d;
    29.  
    30.             /* 旋转: 让大家在写代码的过程中看到立体盒子 */
    31.             /* transform: rotateX(-60deg) rotateY(20deg) ; */
    32.  
    33.             /* 测试缩放效果 */
    34.             /* transform: scale3d(0.5, 1.1, 2); */
    35.         }
    36.  
    37.         .navs li a {
    38.             position: absolute;
    39.             left: 0;
    40.             top: 0;
    41.             display: block;
    42.             width: 100%;
    43.             height: 100%;
    44.             text-align: center;
    45.             text-decoration: none;
    46.             color: #fff;
    47.         }
    48.         
    49.         .navs li a:first-child {
    50.             background-color: green;
    51.             transform: translateZ(20px);
    52.         }
    53.         
    54.         .navs li a:last-child {
    55.             background-color: orange;
    56.             /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
    57.             transform: rotateX(90deg) translateZ(20px);
    58.         }
    59.  
    60.         /* li:hover 立方体旋转 */
    61.         .navs li:hover {
    62.             transform: rotateX(-90deg);
    63.         }
    64.     </style>
    65. </head>
    66.  
    67. <body>
    68.     <div class="navs">
    69.         <ul>
    70.             <li>
    71.                 <a href="#">首页</a>
    72.                 <a href="#">Index</a>
    73.             </li>
    74.             <li>
    75.                 <a href="#">登录</a>
    76.                 <a href="#">Login</a>
    77.             </li>
    78.             <li>
    79.                 <a href="#">注册</a>
    80.                 <a href="#">Register</a>
    81.             </li>
    82.         </ul>
    83.     </div>
    84. </body>
    85.  
    86. </html>

    CSS动画

    使用 animation 添加 动画 效果
    动画效果：实现 多个状态 间的变化过程，动画 过程可控 （重复播放、最终画面、是否暂停）
    过渡可以 实现2个状态间的变化过程
    动画的本质是快速切换大量图片时在人脑中形成的具有 连续性的画面
    l 构成动画的最小单元： 帧或动画帧 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>01-动画实现步骤</title>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 100px;
    12.             background-color: pink;
    13.             /*使用动画*/
    14.             /* animation:change 2s linear; */
    15.             /* animation: change 1s steps(3); 分布动画分成几等分steps */
    16.             /*3 重复三次播放*/
    17.             /* animation: change 2s  steps(2) 1s 3; */
    18.             /*无线循环infinite*/ 
    19.               /*无线循环infinite 动画方向 alternate*/ 
    20.             animation: changes 1s infinite alternate;
    21.             /*执行完毕状态*/
    22.             /* animation:  change 1s backwards;默认值 动画停留在最初的状态 */
    23.             /* animation: changes 1s forwards;/*动画停留在结尾状态forwards/ */
    24.         } 
    25.         /* 定义动画 改变大小 */
    26.         @keyframes change {
    27.             from{
    28.                width: 200px;
    29.             }
    30.             to{
    31.               width: 600px;
    32.             }
    33.             
    34.         }
    35.          /* 二. 定义动画：200 到 500*300 到 800*500 */
    36.         /* 百分比指的是动画总时长的占比 */
    37.         @keyframes changes {
    38.             0% {
    39.                 width: 200px;
    40.             }
    41.             50% {
    42.                 width: 500px;
    43.                 height: 300px;
    44.             }
    45.             100% {
    46.                 width: 800px;
    47.                 height: 500px;
    48.             }
    49.         }
    50.     </style>
    51. </head>
    52. <body>
    53.     <div class="box"></div>
    54. </body>
    55. </html>
    注意：
    Ø 动画名称和动画时长必须赋值
    Ø 取值不分先后顺序
    Ø 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
    使用animation相关属性控制动画执行过程

     逐帧动画实现 使用steps实现逐帧动画

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>逐帧动画</title>
    8.     <style>
    9.         .box{
    10.             width: 140px;
    11.             height: 140px;
    12.        
    13.             background-image:url(./images/bg.png);
    14.             animation: 
    15.             move 2s steps(12) infinite,
    16.             run 8s forwards
    17.  
    18.         }
    19.         @keyframes move {
    20.             /* from{
    21.                 background-position: 0 0;
    22.             } */
    23.             to{
    24.                       /* 1680: 精灵图的宽度 */
    25.                 background-position: -1680px 0;
    26.             }
    27.             
    28.         }
    29.          /* 定义一个盒子移动的动画  800px */
    30.     @keyframes run {
    31.       /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
    32.       /* from {
    33.         transform: translateX(0);
    34.       } */
    35.       to {
    36.         transform: translateX(800px);
    37.       }
    38.     }
    39.  
    40.     </style>
    41. </head>
    42. <body>
    43.     <div class="box"></div>
    44. </body>
    45. </html>

    走马灯效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Document</title>
    7.     <style>
    8.       * {
    9.         padding: 0;
    10.         margin: 0;
    11.       }
    12.       li {
    13.         list-style: none;
    14.       }
    15.  
    16.       img {
    17.         width: 200px;
    18.       }
    19.       
    20.       .box {
    21.         width: 600px;
    22.         height: 112px;
    23.         border: 5px solid #000;
    24.         margin: 100px auto;
    25.         overflow: hidden;
    26.       }
    27.  
    28.       .box ul {
    29.         width: 2000px;
    30.         animation: move 5s infinite linear;
    31.       }
    32.  
    33.       .box li {
    34.         float: left;
    35.       }
    36.  
    37.       /* 定义动画:位移, ul 左侧使用  x -1400  */
    38.       @keyframes move {
    39.         to {
    40.           transform: translateX(-1400px);
    41.         }
    42.       }
    43.  
    44.       /* 用户鼠标移入box,动画暂停 */
    45.       .box:hover ul {
    46.         animation-play-state: paused;
    47.       }
    48.       
    49.     </style>
    50.   </head>
    51.   <body>
    52.     <div class="box">
    53.       <ul>
    54.         <li><img src="./images/zm/1.jpg" alt="" /></li>
    55.         <li><img src="./images/zm/2.jpg" alt="" /></li>
    56.         <li><img src="./images/zm/3.jpg" alt="" /></li>
    57.         <li><img src="./images/zm/4.jpg" alt="" /></li>
    58.         <li><img src="./images/zm/5.jpg" alt="" /></li>
    59.         <li><img src="./images/zm/6.jpg" alt="" /></li>
    60.         <li><img src="./images/zm/7.jpg" alt="" /></li>
    61.  
    62.         <!-- 第567移动的时候,显示区域不能留白 -->
    63.         <li><img src="./images/zm/1.jpg" alt="" /></li>
    64.         <li><img src="./images/zm/2.jpg" alt="" /></li>
    65.         <li><img src="./images/zm/3.jpg" alt="" /></li>
    66.       </ul>
    67.     </div>
    68.   </body>
    69. </html>

  • 相关阅读:
    小谈设计模式（12）—迪米特法则
    Kubernetes之Pod
    Netty（三）- NIO三大组件之Channel
    rust流程控制
    【LeetCode】39、组合总和
    K8S集群etcd 某个节点数据不一致如何修复 —— 筑梦之路
    Cisco交换机关于DHCP SNOOPING的配置指令
    【附源码】计算机毕业设计java支持协作知识建构的Python程序设计课程学习活动平台设计与实现
    Python 中的 with 语句用法和 Pytorch 中的 with torch.no_grad() 解析
    C++ IO流_数据的旅行之路
  • 原文地址：https://blog.csdn.net/weixin_40746230/article/details/125542593