likes
comments
collection
share

CSS3的过度

作者站长头像
站长
· 阅读数 51

CSS3过渡是一种用于在元素状态变化时平滑过渡的效果。通过CSS3过渡，你可以定义元素在状态改变时的动画效果，如颜色、大小、位置等的平滑过渡。

属性

  1. transition-property：

指定要过渡的CSS属性的名称，可以是单个属性或多个属性的列表。你可以同时过渡多个属性，如transition-property: width, height, opacity;。

  1. transition-duration：

指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。你可以为不同的属性指定不同的过渡时间，如transition-duration: 1s;。

  1. transition-timing-function：

定义过渡的时间函数，用于控制过渡的速度曲线，默认值为ease。常见的时间函数还包括linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）等。

  1. transition-delay：

指定过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。你可以为不同的属性指定不同的延迟时间，如transition-delay: 1s;。

  1. transition:

用于简写上述过渡属性的缩写形式，可以一次性指定过渡的多个属性值，如transition: width 1s linear, height 0.5s ease-in;。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .panel {
      width: 300px;
      height: 300px;
      background-color: blue;
      transition-property: transform;
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
    }

    .panel:hover {
      transform: scale(1.8);
    }
  </style>
</head>
<body>
  <div class="panel"></div>
</body>
</html>

在上述示例中，我们创建了一个名为.panel的元素，给定了初始的宽度、高度和背景颜色。通过使用CSS3过渡属性为该元素创建了一个放大的过渡效果。通过transition-property属性，我们指定了要过渡的属性为transform，表示在变换发生时将进行过渡效果。在鼠标悬停时，我们使用:hover伪类选择器为元素添加了一个transform变换属性，并将元素的缩放比例通过scale函数设置为1.8，即放大到原来的1.8倍。由于我们在.panel的CSS规则中定义了过渡属性，因此缩放效果将以1秒的持续时间进行平滑的过渡，并采用了ease-in-out的时间函数，使得放大效果在过渡的开始和结束时都比较缓慢。当鼠标悬停在元素上时，你将看到元素平滑地放大到原来的1.8倍。

转载自:https://juejin.cn/post/7247897453914718269
评论
请登录