CSS学习35：CSS3过渡

最新推荐文章于 2024-07-24 10:40:52 发布

玉安_ZhangDe

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量278

点赞数

分类专栏： CSS 文章标签：前端学习 css3 css

本文链接：https://blog.csdn.net/qq_47373340/article/details/124088748

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

语法：

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

具体属性介绍：

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以
花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease （可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）
记住过渡的使用口诀：谁做过渡给谁加

案例：

把鼠标移动到div上，div添加盒子阴影的同时向上移动3px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 400px;
            background-color: pink;
            /* 谁做过度给谁加transition  （谁变化了就给谁添加过度属性）*/
            /* 最终我们实际操作是 */
            transition: all .3s;

        }
        /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
        div:hover {
            margin-top: -3px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

玉安_ZhangDe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习35：CSS3过渡

语法：transition: 要过渡的属性花费时间运动曲线何时开始;具体属性介绍：属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以花费时间：单位是秒（必须写单位）比如 0.5s 运动曲线：默认是 ease （可以省略）何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）记住过渡的使用口诀：谁做过渡给谁加案例...
复制链接

扫一扫

专栏目录