transition过渡和transform转换

transition过渡

　　让样式变化时有一个过渡效果。

　　transition-property：过渡的属性，all 指的是所有属性都过渡。

　　transition-duration：过渡时间。

　　transition-delay：延迟过渡的时间。

　　transition-timing-function：过渡速度曲线，值和动画的一样。

　　transition 是一个复合属性，它的值依次是：要过渡的属性、过渡时间、延迟过渡时间、过渡速度曲线。

复制代码
<!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>transition过渡</title>
  <style>
    body {
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box {
      background: white;
      width: 100px;
      height: 100px;
      /* 执行过渡的属性 all：所有属性都有过渡 */
      transition-property: all;
      /* 过渡时间 */
      transition-duration: 2s;
      /* 过渡延迟时间 */
      /* transition-delay: 2s; */
      /* 过渡速度曲线 */
      transition-timing-function: ease-in-out;
      /* 过渡 */
      /* transition: 过渡属性 过渡时间 过渡延时时间 过渡速度曲线; */
    }

    .box:hover {
      background: red;
      color: cyan;
      border-radius: 50%;
      width: 210px;
      height: 120px;
    }
  </style>
</head>

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

</html>
复制代码

transform转换

　　可以让元素进行 2D 或 3D 转换，比如说平移、旋转等。

　　rotate(25deg)：元素进行顺时针旋转 25 度，如果是负数那就是逆时针。

　　skew(25deg)：元素进行扭曲 25 度。

　　scale(2)：元素放大 2 倍。

　　translateY(100px)：元素 Y 轴向下移动 100px。

　　translateX(100px)：元素 X 轴向右移动 100px。

　　transition(100px, 100px)：元素 X 轴和 Y 轴移动 100px。参数 1 是 X 轴，参数 2 是 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>transform</title>
  <style>
    body {
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .box {
      background: white;
      width: 300px;
      height: 300px;
      /* 旋转25度 */
      /* transform: rotate(25deg); */
      /* 扭曲25度 */
      /* transform: skew(25deg); */
      /* 放大2倍 */
      /* transform: scale(2); */
      transition: 0.5s;
    }

    .box:hover {
      /* 旋转25度 */
      /* transform: rotate(25deg); */
      /* 扭曲25度 */
      transform: skew(25deg);
      /* 放大2倍 */
      /* transform: scale(2); */
      /* Y 轴向下移动 100px */
      /* transform: translateY(100px); */
      /* X 轴右移动 100px */
      /* transform: translateX(100px); */
      /* transform：translate(X轴, Y轴) */
      /* transform: translate(100px, 100px); */
    }
  </style>
</head>

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

</html>
复制代码

 

posted @   守鹤  阅读(282)  评论(0)  编辑  收藏  举报
相关博文：
·  animation动画
·  js第十三天
·  浅谈transform和transition
·  transition用法
·  过渡transition
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码：从基础到乱码解决
· SpringCloud带你走进微服务的世界
点击右上角即可分享
微信分享提示
AI IDE Trae