学习笔记：CSS3过渡在Web开发中的应用（37）

发表时间: 2024-01-24 11:08

（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>

hover变两倍大

在 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>

学习笔记：CSS3过渡在Web开发中的应用（37）

热门阅读

推荐阅读