CSS过渡

最新推荐文章于 2024-02-28 15:55:58 发布

微笑向日葵°

最新推荐文章于 2024-02-28 15:55:58 发布

阅读量353

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43535265/article/details/114691885

版权

CSS 过渡允许您在给定的时间内平滑地改变属性值。

在这里插入图片描述

如何使用 CSS 过渡？

如需创建过渡效果，必须明确两件事：

您要添加效果的 CSS 属性
效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

改变若干属性值

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 3 秒：

代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 3s;
}

div:hover {
    
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>transition 属性</h1>

<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>

最低0.47元/天解锁文章

微笑向日葵°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。如何使用 CSS 过渡？如需创建过渡效果，必须明确两件事：您要添加效果的 CSS 属性效果的持续时间注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。改变若干属性值下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 3 秒：代码如下：<!DOCTYPE html><html><head><style> di
复制链接

扫一扫