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 次浏览

开启你的 职业生涯

完成课程即可获得认证

开始使用
广告