CSS（八）-- 变形（过渡、动画、平移、旋转、缩放）

目录

1.过渡（transition）

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

1.1transition-property:指定执行过渡的属性

  • 多个属性使用“，”隔开，如果所有属性都需要过渡，则使用all关键字
  • 大部分属性都支持过渡效果
  • 注意：过渡必须是从一个有效数值向另外一个有效数值过渡

1.2transition-duration：执行过渡需要的时间

  • 时间单位：s、ms

1.3transition-timing-function：过得的时序函数

  • ease（默认值）：慢速开始，先加速，再减速
  • liner：匀速运动
  • ease-in：加速运动
  • ease-out：减速运动
  • ease-in-out：先加速后减速

通过贝塞尔曲线指定

transition-timing-function：cubic-bezier(.25,.1,.25,1)

贝塞尔曲线生成网址：(https://cubic-bezier.com)

steps()分步执行过渡效果

  • 第一个值：要分步执行的个数
  • 第二个值：
    • end：在时间结束是执行过渡
    • start：在时间开始时执行过渡

1.4 transition-delay：过渡效果的延迟，等待一段时间后再执行

transition-delay：2s；

1.5transition：可以同时设置过渡相关的所有属性

  • 只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
tansition：2s(持续时间) margin-left（执行属性） 1s（延迟时间）;

2.动画（animation）

  • 动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
  • 设置动画效果必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

2.1设置项

@keyframes

@keyframes test{
      /*from表示动画的开始位置 也可以使用0% */
      from{
            margin-left：0；
      }
      /*动画结束的位置，也可以使用100%*/
      to{
            margin-left:700px;
      }
}

animation-name:引用设定好的@keyframes

animation-name:动画执行时间

animation-delay：设置动画的延时

animation-timing-function：设置移动类型（匀速、加速等）

animation-iteration-count：动画执行的次数

-infinite：无限执行

animation-direction：改变执行的方向

  • normal：默认值，每次都是从to向from运行
  • reverse：反向，从to向from运行
  • alternate：从from向to运行 重复执行动画时反向运行（类似于碰撞效果）
  • alternate-reverse：从to到from运行 重复执行动画时反向执行

animation-play-state：设置动画的执行状态

可选值

  • running（默认值）：动画执行
  • paused：动画暂停
    • 当鼠标移入时动画暂停
.box1:hover div{
      animation-play-state:paused;
}

animation-fill-mode:动画的填充模式

可选值：

  • none（默认值）：动画执行完毕回到初始位置
  • forwards：执行完毕后停在终点位置
  • backwards：元素在delay时就会处于from的状态
  • both：具备forwards和backwards的特点

animation：简写版本

和transition一样，除了持续时间必须在延迟时间前外，其他的属性都没有顺序要求

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
             100px;
            height: 100px;
            margin: 0 auto;
            background-image: url(./image/trump_run.png);
            animation: run 1s steps(6) infinite;
        }

        /*创建关键帧  */
        @keyframes run{
            form{
                background-position: 0 0;
            }
            to{
                background-position:-600px 0 ;
            }
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

3.变形平移

变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局
，transform用来设置元素的变形效果

3.1平移

translateX() 沿着x轴方向平移

transform：translateX(100px);
transform：translateX(50%);//平移元素百分比是相对于自身计算的

translateY() 沿着y轴方向平移

让元素居中

  • 水平居中
.box{
      background-color:black;
      position:absolute;
      left:50%;
      transform:translateX(-50%);
}
  • 垂直居中
.box{
      background-color:black;
      position:absolute;
      top:50%;
      transform:translateY(-50%);
}

3.2translateZ() 沿着z轴方向平移

  • 正常情况就是调整元素和人眼之间的距离
    距离越大，元素离人越近

  • z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视图

  • 视距：perspective

html:perspective:800px;
.box1{
      200px;
      height:200px;
      background-color:#bfa;
      margin:20px auto;
      transtion:2s;
}
body:hover .box1{
      transform:translateZ(200px);
}

4.旋转

  • 通过旋转可以使元素沿着x、y或z轴旋转指定的角度
    rotateX()
    rotateY()
    rotateZ()
transform:rotateZ(180deg)

可选值：deg，turn

  • 30deg:30度
  • .5turn:半圈
transform:rotateZ(.5turn)

backface-visibility：设置是否显示元素的背面

  • visible：显示；
  • hidden：不显示；

5.设计时钟

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

        .sec{
            height: 50%;
            4px;
            background-color: red;
            margin:0 auto;
            
        }

        .sec-wrapper{
            position:absolute;
            height:100%;
            100%;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            background-color:none;
            animation: run 60s infinite;

        }
        .clock{
             500px;
            height: 500px;
            margin:0 auto;
            margin-top:100px;
            border-radius:50%;
            border:10px solid black;
            position: relative;
            
        }
        .hour-wrapper{
            position:absolute;
            height:55%;
            55%;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            background-color:none;
            animation: run 43200s infinite;
        }
        .hour{
            height: 50%;
            4px;
            background-color: black;
            margin:0 auto;
            z-index: 3;
          
        }
        .min-wrapper{
            position:absolute;
            height:75%;
            60%;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            background-color:none;
            animation:run 3600s infinite;
        }
        .min{
            height: 50%;
            4px;
            background-color: rgb(28, 224, 77);
            margin:0 auto;
            z-index: 2;
            
        }

        /* 旋转的关键帧 */
        @keyframes run{
            from{
                transform:rotateZ(0);
            }
            to{
                transform:rotateZ(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="clock">
        <div class="sec-wrapper">
            <div class="sec"></div>
        </div>
        <div class="min-wrapper">
            <div class="min"></div>
        </div>
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>
    </div>
</body>
</html>

6.缩放

  • 对元素进行缩放
    scaleX()：水平方向
    scaleY()：垂直方向
    scale：两方向同时

7.设置变形的原点，默认值center

transform-origin:20px 20px;
解释：例如缩放，变形原点是中心，当设置为transform-origin:0px 0px;后变形原点就变为左上角
那么缩放就只能在右和下方缩放

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/psyduck/p/14342155.html