CSS3三大模块之过度模块初步了解

最新推荐文章于 2023-06-19 11:25:22 发布

407指导员

最新推荐文章于 2023-06-19 11:25:22 发布

阅读量189

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109829162

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

CSS3三大模块之过度模块

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过度三要素

1.必须要有属性发生变化

2.必须告诉浏览器哪个属性需要执行过度效果(ransition-property 属性)

3.必须告诉系统过度效果持续时长。(transition-duration 属性)

transition-property 属性

规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

transition-duration 属性

规定完成过渡效果需要花费的时间（以秒或毫秒计）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            /*告诉浏览器哪个属性需要执行过度效果*/
            transition-property: width,background-color;
            /*告诉浏览器这个过度效果持续的时间*/
            transition-duration: 5s,2s;

        }
        /*:hover这个伪类选择器除了可以用在a标签上，还可以用在其他任何标签上*/
        div:hover {
            width: 500px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

过渡属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

注意点

1.当多个属性需要执行过度效果就使用逗号隔开即可。
/*告诉浏览器哪个属性需要执行过度效果*/
transition-property: width,background-color;
/*告诉浏览器这个过度效果持续的时间*/
transition-duration: 5s,2s;
2.ie10以上才支持过度模块。

3.a标签的伪类选择器是支持所有的标签的。

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3三大模块之过度模块初步了解

CSS3三大模块之过度模块通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过度三要素1.必须要有属性发生变化2.必须告诉浏览器哪个属性需要执行过度效果(ransition-property 属性)3.必须告诉系统过度效果持续时长。(transition-duration 属性)transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）
复制链接

扫一扫

专栏目录