数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程序设计
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究CSS3 转换速记属性
transition 速记属性允许我们在同一行中将 transition-property、transition-duration、transition-timing function 和 transition-delay 指定为转换属性的值 -
transition-duration - 指定转换效果完成需要多少秒或毫秒
transition-property - 产生效果的属性名称
transition-timing function - 转换的速度曲线
transition-delay - 以秒为单位设置转换效果的延迟
记住，你需要同时设置应用该效果的 CSS 属性和持续时间。
假设我们在鼠标悬停时将形状转换为椭圆。为此，设置一个 div-
<div class="container"> <div></div> </div>
使用转换对容器进行样式设置-
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background-color: rgb(25, 0, 255);
border: 2px solid red;
transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}
转换持续时间
上面将 border-radius 和 background-color 属性的持续时间设置为 2 秒-
2s for the border-radius property 2s for the background-color property
转换延迟
上面将延迟设置为 border-radius 和 background-color 属性。 transition-delay 分别设置为 1 秒和 2 秒；
1s for the border-radius property 2s for the background-color property
转换正时函数
上面将转换设置为 border-radius 和 background-color 属性。 transition-timing-function 设置为 -
ease for the border-radius ease-out for the background-color property
悬停时，形状将会变为椭圆，因为 border-radius 设置为 50。背景颜色也会改变-
container:hover div {
background-color: orange;
border-radius: 50%;
}
示例
下面是 CSS 中转换速记属性的代码 -
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background-color: rgb(25, 0, 255);
border: 2px solid red;
transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}
.container:hover div {
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Transition shorthand property</h1>
<div class="container">
<div></div>
</div>
<p>Hover over the above div to change its color and its shape to oval</hp>
</body>
</html>
更新时间： 31-Oct-2023
435 次浏览
广告