CSS 过渡(重点)

最新推荐文章于 2023-04-10 22:14:36 发布

安澜仙王

最新推荐文章于 2023-04-10 22:14:36 发布

阅读量184

点赞数

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

本文链接：https://blog.csdn.net/sinat_28317385/article/details/120733648

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS3中的过渡效果，包括过渡动画的概念、如何创建过渡效果，以及与`:hover`伪类的结合使用。示例代码演示了如何通过CSS3实现元素宽度、高度和背景颜色的平滑过渡，以及进度条样式的动态变化。重点讲解了`transition`属性的各个参数，包括过渡属性、时间、运动曲线和延迟时间，并提供了多个代码实例帮助理解。

摘要由CSDN通过智能技术生成

过渡动画:是从一个状态渐渐地过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(IE9以下版本)但是不会影响页面布局。
我们现在经常和:hover一起搭配使用

过渡的口诀：谁做过渡给谁加

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以。如果想要所有属性都变化过渡，写一个all就可以。
2.花费时间：单位是秒(必须写单位)比如0.5s
3.运动曲线：默认是ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="icomoon/style.css" rel="stylesheet">
		<style type="text/css">
            div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
		</style>
	</head>
	<body>
        <div></div>
	</body>
</html>

进度条示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3过渡练习-进度条</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>