HTML5+CSS3-基础06-transition过渡

最新推荐文章于 2024-06-25 01:00:00 发布

wuCase

最新推荐文章于 2024-06-25 01:00:00 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5+CSS3 文章标签：前端 css3 html5 javascript jquery

本文链接：https://blog.csdn.net/weixin_47402645/article/details/105801625

HTML5+CSS3 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解CSS3中的transition过渡属性，包括过渡时长、速度、延迟时间及指定过渡CSS属性的方法。同时，详细解析transform属性的多种应用，如旋转、缩放、位移和扭曲，提供丰富的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 过渡

transition：过渡属性过渡时长过渡速度延迟时间；

transition-property：指定过渡的CSS属性。
transition-duration：指定完成过渡所需的时间。
transition-timing-function：指定过渡调速函数。
transition -delay：指定过渡开始出现的延迟时间。

在这里插入图片描述

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transition</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 全部变化属性 3s过渡时间 速度曲线linear（匀速） 延迟为0 */
      transition: all 3s linear;
    }
    /* 鼠标悬停在div上时触发 */
    div:hover{
      width: 100px;
      background-color:black;
      transform: translate(300px, 300px) scale(2,2) rotate(200deg);    
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

transform属性

1. 变形-旋转 ratate()函数

通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。
如果这个值为正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转。
在这里插入图片描述

transform：rotateX(30deg) 绕着X轴顺时针转32度
transform：rotateY(30deg) 绕着Y轴顺时针转32度
transform：rotateZ(30deg) 绕着Z轴顺时针转32度

可添加透视属性：perspective：500px,是旋转更直观，值越大近大远小效果越小，添加属性给上级元素才生效（推荐添加到父元素）
例如：transform：rotate(45deg);
2.变形-缩放 scale() 函数

让元素根据中心原点对对象进行缩放。 scale()的取值默认的值为1，当值设置为0.01到0.99之间时，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
transform: scale(X轴倍数，Y轴倍数)
transform: scale(X轴倍数， 1)
transform: scale(1，Y轴倍数)

3.变形-位移 translate() 函数

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
transform: translate(X轴， Y轴);
transform: translateY(数值);
transform: translateX(数值);
transform-origin：水平方向垂直方向；
例如：(3中表示)
transform-origin: 200px 300px;
transform-origin:center center;
transform-origin: 50% 350%

4.变形- 扭曲 skew()函数

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
一个参数：表示水平方向的倾斜角度；
两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

在这里插入图片描述