CSS动画-形变

最新推荐文章于 2024-08-20 23:30:49 发布

DustinWangq

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量128

点赞数

分类专栏： # HTML-CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Welitsi/article/details/132354240

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、transform

CSS transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。

transform是形变的意思，transformer就是变形金刚；

注意事项: 并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变）

所以，transform对于行内级非替换元素是无效的；

比如对span、a元素等；

<!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>Document</title>
  <style>
    .container {
      display: inline-block;
      border: 5px solid #f00;
    }

    .container .box {
      width: 200px;
      height: 200px;
      background-color: orange;

      transform: translate(100px, 100px);
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

1.transform用法

transform属性的语法如下：

在这里插入图片描述

常见的函数transform function有：

平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(deg)
倾斜：skew(deg, deg)

通过上面的几个函数，我们可以改变某个元素的形变

2.位移 - translate

◼ 平移：translate(x, y)

这个CSS 函数用于移动元素在平面上的位置。
translate 本身可以表示翻译的意思，在物理上也可以表示平移；

◼ 值个数

一个值时，设置x轴上的位移
二个值时，设置x轴和y轴上的位移

◼ 值类型：

数字：100px
百分比：参照元素本身（ refer to the size of bounding box ）

补充：

translate是translateX和translateY函数的简写。
- translate3d 后续了解
translate的百分比可以完成一个元素的水平和垂直居中：

在这里插入图片描述

translate函数相对于flex布局的兼容性会好一点点
- 不过目前flex布局已经非常普及，直接使用flex布局即可；

<!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>Document</title>
  <style>
    .container {
      display: inline-block;
      border: 5px solid #f00;
    }

    .container .box {
      width: 200px;
      height: 100px;
      background-color: orange;

      /* 百分比: 你的百分比是相对于谁? */
      /* 不同地方的百分比相对参照物是不一样 */

      /* traslate的百分比是相对于自身的 */
      /* 如果设置的x位移: 那么参考的是自身的宽度 */
      /* 如果设置的y位移: 那么参考的是自身的高度 */
      transform: translate(100%, 100%);

      /* transform: translate(x, y); */
      /* transform: translateX();
      transform: translateY(); */
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

3.缩放 - scale

◼ 缩放：scale(x, y)

scale() CSS 函数可改变元素的大小。

◼ 值个数

一个值时，设置x轴上的缩放
二个值时，设置x轴和y轴上的缩放

◼ 值类型：

数字：
- 1：保持不变
- 2：放大一倍
- 0.5：缩小一半
百分比：百分比不常用

◼ scale函数时scaleX和scaleY的缩写：

scale3d 后续再了解；

在这里插入图片描述

<!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>Document</title>
  <style>
    body {
      text-align: center;
      padding-top: 200px;
    }

    .container {
      display: inline-block;
      border: 20px solid #f00;
    }

    .box {
      border: 20px solid #0f0;
      width: 200px;
      height: 200px;
      background-color: orange;

      /* 形变 */
      transform: scale(60%, 60%);
    }

    .box1 {
      border: 20px solid #0f0;
      width: 200px;
      height: 200px;
      background-color: purple;

      /* 形变 */
      /* 0~1 对元素进行缩小 */
      /* 大于1 对元素进行放大 */
      /* transform: scale(1.2, 1.2); */
    }

    .box1:hover {
      transform: scale(1.1, 1.1);
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>
  
  <div class="container">
    <div class="box1"></div>
  </div>

</body>
</html>

4.旋转 - rotate

◼ 旋转：rotate()

◼ 值个数

一个值时，表示旋转的角度

◼ 值类型：

常用单位deg：旋转的角度（ degrees ）
正数为顺时针
负数为逆时针

在这里插入图片描述

<!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>Document</title>
  <style>
    body {
      text-align: center;
      padding-top: 200px;
    }

    .container {
      display: inline-block;
      border: 10px solid #f00;
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: orange;
    }

    .box:hover {
      transform: rotate(-45deg);
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

5.transform-origin

◼ transform-origin：形变的原点

比如在进行scale缩放或者rotate旋转时，都会有一个原点。

◼ 一个值：

设置x轴的原点

◼ 两个值：

设置x轴和y轴的原点

◼ 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个

left, center, right, top, bottom关键字
length：从左上角开始计算
百分比：参考元素本身大小

<!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>Document</title>
  <style>
    body {
      text-align: center;
      padding-top: 200px;
    }

    .container {
      display: inline-block;
      border: 10px solid #f00;
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: orange;

      /* 修改当前元素的形变的原点位置 */
      /* transform-origin: center top; */
      /* transform-origin: 20px 20px; */
      transform-origin: 10% 10%;
    }

    .box:hover {
      transform: rotate(45deg) scale(0.5);
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

6.倾斜 - skew

◼ 倾斜：skew(x, y)

函数定义了一个元素在二维平面上的倾斜转换。

◼ 值个数

一个值时，表示x轴上的倾斜
二个值时，表示x轴和y轴上的倾斜

◼ 值类型：

deg：倾斜的角度
正数为顺时针
负数为逆时针

◼ 注意：倾斜的原点受transform-origin的影响

<!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>Document</title>
  <style>
    .box {
      font-style: italic;
      width: 200px;
      height: 100px;
      background-color: orange;
    }

    .box:hover {
      transform: skew(10deg, 10deg);
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

7.transform设置多个值

◼ 前面我们看到了 transform 的语法，它是可以设置多个transform-function的：

那么就意味着，我们可以给transform设置多个形变的函数；

在这里插入图片描述

<!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>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: orange;
    }

    .box:hover {
      /* transform: translateX(50px);
      transform: scale(1.2);
      transform: rotate(45deg); */

      /* 
        <transform-function>+
          +: 一个或者多个, 并且多个之间以空格分隔
          transform: scale() translate();

        <box-shadow>#
          #: 一个或者多个, 多个之间以, 分隔
          box-shadow: 1px 1px 1px 1px #f00, 
      */
      transform: translate(50px) scale(1.2) rotate(45deg);
    }
  </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>Document</title>
  <style>
    .container {
      /* position: relative; */
      /* display: flex;
      align-items: center; */

      height: 300px;
      background-color: orange;
    }

    .box1 {
      position: absolute;
      width: 100px;
      /* height: 100px; */
      top: 0;
      bottom: 0;
      margin: auto 0;
      background-color: #f00;
    }

    .box2 {
      background-color: #f00;
    }

    .box3 {
      display: inline-block;
      height: 100px;
      background-color: #f00;

      /* 两件事情:
          1.让元素向下位移父元素的50%
          2.让元素向上位移自身的50% 
      */
      /* margin-top的百分比是相对于包含块(父元素)的宽度 */
      /* margin-top: 50%; */
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
    }
  </style>
</head>
<body>
  
  <!-- 
    水平居中:
      1.行内级元素: 
        * 设置父元素的text-align: center
      2.块级元素:
        * 设置当前块级元素(宽度) margin: 0 auto;
      3.绝对定位
        * 元素有宽度情况下, left0/right0/margin: 0 auto;
      4.flex
        * justify-content: center
   -->

  <!--
    垂直居中:
      1.绝对定位
        * 元素有高度情况下, top0/bottom0/margin: auto 0;
  -->
  <!-- 
    1.垂直居中: 绝对定位
    弊端:
      1> 必须使用定位(脱离标准流)
      2> 必须给元素设置高度
   -->
  <!-- <div class="container">
    <div class="box1">coderwhy</div>
  </div> -->

  <!-- 
    2.垂直居中: flex布局(直接使用flex)
    弊端:
      1> 当前flex局部中所有的元素都会被垂直居中
      2> 相对来说, 兼容性差一点点(基本可以忽略)
   -->
   <!-- <div class="container">
     <div class="box2">flex布局的居中</div>
     aaaa
   </div> -->

   <!-- 
    3.垂直居中: top/translate(个人推荐, 不好理解)
  -->
  <div class="container">
    <div class="box3">coder</div>
    aaaaa
  </div>

</body>
</html>

三、transition动画

1.认识transition动画

◼ 什么是transition动画呢？

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；
比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效；
但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；

◼ 通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。

◼ CSS transitions 可以决定

哪些属性发生动画效果 (明确地列出这些属性)
何时开始 (设置 delay）
持续多久 (设置 duration)
如何动画 (定义timing function，比如匀速地或先快后慢)。

2.哪些CSS属性可以做动画呢？

◼ 并非所有的CSS属性都可以执行动画的，那么我们如何知道哪些属性支持动画呢？

◼ 方法一：在MDN可执行动画的CSS属性中查询

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

◼ 方法二：阅读CSS属性的文档说明

在这里插入图片描述

3.过渡动画 - transition

◼ transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

在这里插入图片描述

◼ transition-property：指定应用过渡属性的名称

all：所有属性都执行动画；
none：所有属性都不执行动画；
CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；

◼ transition-duration：指定过渡动画所需的时间

单位可以是秒（s）或毫秒（ms）

◼ transition-timing-function：指定动画的变化曲线

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

◼ transition-delay：指定过渡动画执行之前的等待时间

<!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>Document</title>
  <style>
    .container {
      background-color: #f00;
    }

    .box {
      position: relative;
      left: 0;

      width: 200px;
      height: 100px;
      background-color: orange;

      /* 告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果 */
      /* transition-property: transform, left; */
      /* transition-property: all;
      transition-duration: 1s;
      transition-timing-function: ease-in;
      transition-delay: 1s; */
      
      /* 简写属性 */
      transition: all 1s ease-in 1s;
    }

    .container:hover .box {
      left: 100px;
      transform: translate(100px);
      width: 500px;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

四、Animation 动画

1.认识Animation

◼ 之前我们学习了transition来进行过渡动画，但是过渡动画有如下的缺点：

transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
transition 不能重复执行，除非一再触发动画；
transition 需要在特定状态下会触发才能执行，比如某个属性被修改了；

◼ 如果我们希望可以有更多状态的变化，我们可以使用 CSS Animation。

◼ CSS Animation的使用分成两个步骤：

步骤一：使用 keyframes 定义动画序列（每一帧动画如何执行）
步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

◼ 接下来我们一个个步骤来学习。

2.@keyframes规则

◼ 可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：

关键帧使用percentage来指定动画发生的时间点；
0%表示动画的第一时刻，100%表示动画的最终时刻；
因为这两个时间点十分重要，所以还有特殊的别名：from和to；

◼ 也就是说可以使用from和to关键字：

from相当于0%
to相当于100%

3.animation属性

◼ CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

◼ animation-name：指定执行哪一个关键帧动画

◼ animation-duration：指定动画的持续时间

◼ animation-timing-function：指定动画的变化曲线

◼ animation-delay：指定延迟执行的时间

◼ animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画

◼ animation-direction：指定方向，常用值normal和reverse

◼ animation-fill-mode：执行动画最后保留哪一个值

none：回到没有执行动画的位置
forwards：动画最后一帧的位置
backwards：动画第一帧的位置

◼ animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

<!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>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: orange;

      /* box要执行moveAnim的动画 */
      animation-name: moveAnim;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;

      /* 其他属性: */
      /* 动画执行的次数 */
      /* animation-delay: 2s; */
      /* animation-iteration-count: 2; */
      /* animation-direction: reverse; */
      /* 元素停留在动画的哪一个位置 */
      /* animation-fill-mode: forwards; */

      /* js动态修改 */
      /* animation-play-state: paused; */
      animation: moveAnim 3s linear 1s 2 normal forwards, ;
    }

    @keyframes moveAnim {
      0% {
        transform: translate(0, 0) scale(0.5, 0.5);
      }

      33% {
        transform: translate(0, 200px) scale(1.2, 1.2);
      }

      66% {
        transform: translate(400px, 200px) scale(1, 1);
      }

      100% {
        transform: translate(400px, 0) scale(0.5, 0.5);
      }
    }

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

  </div>

</body>
</html>

DustinWangq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画-形变

bottom : 0;} .box2 {} .box3 {/* 两件事情:1.让元素向下位移父元素的50%2.让元素向上位移自身的50%*/ /* margin-top的百分比是相对于包含块(父元素)的宽度 */ /* margin-top: 50%;top : 50%;
复制链接

扫一扫

专栏目录