• CSS——过渡、形变、动画

    一、什么是过渡

    鼠标移动到一个元素上面，元素发生变化，鼠标移走，变化消失；这是一个动态的过程，这就是过渡。在CSS过渡中允许你在给定的时间内平滑地改变属性值。

    通过过渡可以指定一个属性发生变化的切换方式；

    通过过渡可以创建一些非常好的效果，提升用户体验感；

    使用过渡就是使用我们transition这个属性；

    二、过渡的属性

    1、transition 【复合写法】用于向四个过渡属性设置为单一属性

    2、transition-duration        规定过渡效果要持续多少秒/毫秒，属性值：时间【必须属性】

    3、transition-delay        规定过渡效果的延迟（以秒记）属性值：时间

    4、transition-property        规定过渡效果所针对的CSS属性的名称

    5、transition-timing-function        规定过渡效果的速度曲线

    这些属性值部分顺序，但第一个时间必定是过渡花费时间。持续时间第二个时间才是过渡延迟时间。

    transition-timing-function 属性可以使用的属性值

    ease规定过渡效果，先缓慢开始，然后加速，然后缓慢的结束（默认）
    linear从开始到结束具有相同速度的过渡效果，匀速运动
    ease-in缓慢开始，加速运动
    ease-out缓慢结束，减速运动
    ease-in-out以慢速开始和结束的过渡效果
    cubic-bezier（n,n,n,n）允许你在三次贝塞尔函数中定义自己的值                
    step（n）分步执行

    案列展示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .contain {
    11.             width: 132px;
    12.             height: 271px;
    13.             background-color: pink;
    14.             margin: 100px auto;
    15.             background-image: url(./one.webp);
    16.             /* transition: .1s steps(3); */
    17.             animation-name: run;
    18.             animation-duration: 1.2s;
    19.             animation-timing-function: steps(3);
    20.             animation-iteration-count: infinite;
    21.         }
    22.         /* .contain:hover {
    23.             background-position: -396px 0;
    24.         } */
    25.         
    26.         @keyframes run {
    27.             from {
    28.                 background-position: 0px 0
    29.             }
    30.             to {
    31.                 background-position: -396px 0
    32.             }
    33.         }
    34.     </style>
    35. </head>
    36.  
    37. <body>
    38.     <div class="contain"></div>
    39. </body>
    40.  
    41. </html>

    三、什么是动画

    CSS可实现HTML元素的动画效果

    动画使元素逐渐从一种样式转变为另一种样式，可以随意更改任意数量的CSS属性，相对于以前的动画片一样，需要很多张定格图像，然后连贯起来，那么这样一个连贯就是我们的动画，在HTML中可以简单的设置一些动画，那么其中一张纸定格图片就是我们的关键帧。

    四、动画的属性

    动画属性说明
    @keyframes规定动画模式，设置关键帧
    animation设置所有动画的简写属性，只有时间顺序要求
    animation-name规定@keyframes动画的名称，必须
    animation-duration动画完成一个周期应花费的时间，必须
    animation-delay动画开始的延迟
    animation-iteration-count动画应播放的次数
    animation-direction动画是向前播放还是向后播放还是交替播放
    animation-timing-function动画的速度曲线，与过渡的属性值一样
    animation-fill-mode元素在不播放动画时的样式，（开始 结束或两者同时）
    animation-play-state动画时运行还是暂停

    1、animation-iteration-count【动画迭代次数，规定动画播放次数】

            自然数【1 2 3 ...】

            infinite【无限执行】

    2、animation-direction【动画的执行方向】

            normal        默认值，从from-to

            reverse        从to-from，每次都是

            alternate        从from-to，回来的时候反向执行

            alternate-reverse        从to-from执行，回来反向执行

    3、animation-play-state【动画的执行状态】

            running        默认值，动画执行

            paused        动画暂停

    4、animation-fill-mode【元素播放前的样式】

            none        默认值，动画执行完后，回到原来样式

            forwards        执行完后，展示to的样式

            backwards        延时等待，元素会显示from样式

            both        介个了forwards和backwards

    五、网页logo的设置

    网页标题一般都是使用专门的图片，是.iocn结尾的图片。

    ico图标的生产网址可以参照：https://bitbug.net

    在网页头部标签中使用：<link rel="shortcut icon" href="图标文件">

        <link rel="shortcut icon" href="favicon.ico">

    六、什么是形变

    属于2D/3D上的装换、变形效果，不是一个动画，就是一个变形。比如正方形变平行四边形，在变为圆形，都是形状变成另一个形状。但是配合回档transition/animation，他就会有一段时间内的过渡效果，形成了动画。

    变形就是通过CSS改变元素的形状。

    使用transform属性来设置元素的变形效果，里面的属性都可以设为负数。

    其中transform-origin属性用于设置形变的原点

    转换允许我们设置移动、旋转、缩放和倾斜元素;

            位置：位移 translate（X,Y）

            大小：缩放scale（XX）

            旋转：rotate（xx deg）

    1、形变的位移属性

    transform：translateX（）        沿着X轴方向平移

    transform:translateY()        沿着Y轴方向平移

    transform：translateZ（）        沿着Z轴方向平移

    注意点：

    • 当我们使用形变位移的时候，如果需要朝两个不同的方向移动，那么这两个方向不能分开写，只能合并写（transform：translateX（） translateY（））；或者transform：translate（X,Y）。
    • 形变位移只能位移块元素或者行内块元素。
    • 当translate的值为百分数的时候，它的百分比是根据自身
    • 位移之后，元素还是占着原来的位置的，（和相对定位差不多，原本位置存在，只不过看着像走了）
    • 通常使用在页面中鼠标移动上去的效果

    关于Z轴平移，正常情况下，就是调整元素和人眼之间的距离。【距离越大，元素离人越近，元素看着越大，实际上元素的实际大小不变】

    Z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看的见效果，必须给网页body设置视距【perspective】视距单位使用的是px像素。（需要3D效果就必须要视距）

    2、形变的缩放属性

    scaleX        水平方向缩放

    scaleY        垂直方向缩放

    scale（2,2）        双向缩放

    注意点：scale缩放都是成倍数缩放的，所以里面的属性值不能加上单位。当属性值小于1的时候，就是缩小。

    1.     
    2.         .test img {
    3.             width: 200px;
    4.             height: 200px;
    5.             transition: all .5s linear;
    6.         }
    7.         
    8.         .test img:hover {
    9.             transform: scale(1.5, 1.5);
    10.         }
    11. <!-- 缩放 -->
    12.         <div class="test">
    13.             <p>缩放测试</p>
    14.             <img src="img/dog2.jpg">
    15.         </div>

    3、形变的旋转属性

    rotateX        X轴方向旋转

    rotateY        Y轴方向旋转

    rotateZ        Z轴方向旋转

    rotate（）        元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位是deg（1turn就是一圈）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .contain {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: pink;
    14.             margin: 50px auto;
    15.             perspective: 700px;
    16.         }
    17.         
    18.         .demo {
    19.             transition: .5s linear;
    20.             /* position: absolute; */
    21.         }
    22.         
    23.         img {
    24.             width: 200px;
    25.             height: 200px;
    26.         }
    27.         
    28.         .demo:nth-of-type(1):hover {
    29.             transform: rotateX(360deg);
    30.         }
    31.         /* 向右旋转 */
    32.         
    33.         .demo:nth-of-type(2):hover {
    34.             transform: rotateY(88deg);
    35.         }
    36.         
    37.         .demo:nth-of-type(3):hover {
    38.             transform: rotateZ(180deg);
    39.         }
    40.     </style>
    41. </head>
    42.  
    43. <body>
    44.     <div class="contain">
    45.         <div class="demo">
    46.             <img src="img/dog.jpg" alt="">
    47.         </div>
    48.         <div class="demo">
    49.             <img src="img/dog1.jpg" alt="">
    50.         </div>
    51.         <div class="demo">
    52.             <img src="img/dog2.jpg" alt="">
    53.         </div>
    54.  
    55.  
    56.     </div>
    57. </body>
    58.  
    59. </html>

  • 相关阅读:
    Llama模型家族训练奖励模型Reward Model技术及代码实战（三） 使用 TRL 训练奖励模型
    ​Profinet转EtherNET/IP从站连接欧姆龙plc与西门子200smart通讯的配置方法​
    什么是 java 序列化？什么情况下需要序列化？
    解析相对路径和绝对路径(以图片为例)
    计算机前沿（从三次数学危机到量子计算）
    linux——(4)磁盘与文件系统管理
    Autosar Configuration(七） Security之导入DBC后配置SecOC安全报文
    LeetCode：207. 课程表、210. 课程表 II（拓扑排序 C++）
    基于 Docker 的 Redis Cluster 集群部署
    CSS学习笔记04
  • 原文地址：https://blog.csdn.net/ywforever/article/details/125292037