【CSS3】Transform 中的过度动画参数怎么填，网页交互理解

最新推荐文章于 2024-08-01 13:42:52 发布

酷码编程接单空间

最新推荐文章于 2024-08-01 13:42:52 发布

阅读量365

点赞数 4

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_33877849/article/details/140810988

版权

下面是一个HTML示例，展示了使用不同transition-timing-function参数的50px x 50px的div元素。每个div在鼠标悬停时都会放大，以展示不同的速度曲线效果。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS Transition Timing Functions</title>
<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    background-color: rgb(131, 131, 141);
    border-radius: 6px;
    transition: transform 0.3s;
    cursor: pointer;
    font-size: 15px;
    line-height: 70px;
    text-align: center;
  }

  .linear:hover {
    transform: scale(2);
    transition-timing-function: linear;
  }

  .ease-in:hover {
    transform: scale(2);
    transition-timing-function: ease-in;
  }

  .ease-out:hover {
    transform: scale(2);
    transition-timing-function: ease-out;
  }

  .ease-in-out:hover {
    transform: scale(2);
    transition-timing-function: ease-in-out;
  }

  .step-start:hover {
    transform: scale(2);
    transition-timing-function: step-start;
  }

  .step-end:hover {
    transform: scale(2);
    transition-timing-function: step-end;
  }

  .cubic-bezier:hover {
    transform: scale(2);
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
</style>
</head>
<body>

<div class="container">
  <div class="box linear">Linear</div>
  <div class="box ease-in">Ease-in</div>
  <div class="box ease-out">Ease-out</div>
  <div class="box ease-in-out">Ease-in-out</div>
  <div class="box step-start">Step-start</div>
  <div class="box step-end">Step-end</div>
  <div class="box cubic-bezier">Custom.Bezier</div>
</div>

</body>
</html>

在这个示例中：

.container 类创建了一个Flexbox容器，用于在页面上水平和垂直居中显示，并分散排列子元素。
.box 类定义了每个方块的基础样式，包括尺寸、背景颜色、圆角和过渡效果。
不同的:hover伪类为每个方块定义了悬停效果，使用transform: scale(2);使方块放大到原来的2倍。
每个:hover伪类还指定了不同的transition-timing-function，以展示该参数的效果。

请注意，step-start和step-end可能需要将transition-duration设置得更长一些，以便更清楚地展示效果，因为它们使用离散的步进。例如：

.step-start:hover {
  transform: scale(2);
  transition-timing-function: steps(5, start);
}

在这个例子中，steps(5, start)表示动画将分为5步进行，且在每一步的开始时立即跳至该步的状态。您可以根据需要调整步数。

酷码编程接单空间

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】Transform 中的过度动画参数怎么填，网页交互理解

表示动画将分为5步进行，且在每一步的开始时立即跳至该步的状态。您可以根据需要调整步数。设置得更长一些，以便更清楚地展示效果，因为它们使用离散的步进。在鼠标悬停时都会放大，以展示不同的速度曲线效果。下面是一个HTML示例，展示了使用不同。
复制链接

扫一扫