CSS3之过渡

最新推荐文章于 2023-04-18 18:01:47 发布

萌新菜鸟前端

最新推荐文章于 2023-04-18 18:01:47 发布

阅读量201

点赞数 1

分类专栏： H5C3 文章标签：个人学习日记

本文链接：https://blog.csdn.net/zh_hunan/article/details/102696327

版权

H5C3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3 过渡

什么是过渡

添加某种效果可以从一种样式转变到另一个的时候，不用使用Flash动画或JavaScript。

它是如何工作

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

案例

    <style>
       div {
        width: 100px;
        height: 100px;
        background-color: hotpink;
        margin: 100px auto;
        transform-origin: top ;
        transition: all .2s;
       }
       div:hover {
           transform: scale(2);
           border-radius: 20px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
    <div></div>
</body>

注意：如果未指定时间，transition将没有任何效果，因为默认值是0。
如果要写多个样式用逗号隔开

div
{
    transition: width 2s, height 2s, transform 2s;
}

过渡属性

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

萌新菜鸟前端

关注

1
点赞
踩
0

收藏

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

CSS3 过渡什么是过渡添加某种效果可以从一种样式转变到另一个的时候，不用使用Flash动画或JavaScript。它是如何工作CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。案例 <style> div { width: 100px; ...
复制链接

扫一扫