优秀的编程知识分享平台

网站首页 > 技术文章 正文

Web开发学习笔记(37)——CSS3(11)过渡

nanyue 2024-10-30 02:58:11 技术文章 5 ℃

（1）想让元素样式有个变化的过程，那么我们需要以某种方式从一个样式过渡到另一种样式。

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
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>
        div{
            margin-top:40px;
            margin-left:40px;
            width:50px;
            height:50px;
            background-color:#51adcf;
            transition: transform 1s ease-in-out; /*ease-in-out 慢速开始慢速结束*/
        }
        div:nth-child(2){
            transform: rotate(-60deg);
        }
        div:hover{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>
  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transtion 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表：

属性值

说明

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

linear

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease-in

规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out

规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out

规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

steps(int,start 或者 end)

steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。

step-start

相当于 steps(1, start)。

step-end

相当于 steps(1, end)。

cubic-bezier(n,n,n,n)

规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

initial

规定使用默认值。

inherit

规定从父元素继承该属性值。

例子，图片一秒一步，4步变大为原先二倍：

<!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>
        div{
            width:50px;
            height:50px;
            margin:50px;
            background-color:cornflowerblue;
            transition: transform 4s steps(4);
        }
        div:hover{
            transform:scale(2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

练习一下：

  • 在 body 中添加一个宽和高均为 100 个像素的 div 元素，其背景颜色为黄色。
  • 设置过渡样式，当鼠标放在元素上，延迟 1 秒后，元素的宽度会慢慢变成 300 个像素。
  • 过渡整个过程会持续 5 秒。

    • 按以上要求用 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>
        div{
            width:100px;
            height: 100px;
            background-color:rgb(252, 252, 69) ;
            transform-origin:left center; /*固定左端不动，指定变化起始位置*/
        }
        div:hover{
            transform:scaleX(3);
            transition: transform 5s 1s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    Tags：

    猜你喜欢

    最近发表
    标签列表