Web 开发之H5 Transition动画变换

最新推荐文章于 2023-02-01 17:47:01 发布

weixin_34032621

最新推荐文章于 2023-02-01 17:47:01 发布

阅读量938

点赞数

文章标签： python

原文链接：https://my.oschina.net/617669559/blog/1114040

版权

2019独角兽企业重金招聘Python工程师标准>>>

transition 属性是一个简写属性，用于设置四个过渡属性： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。

注意： transition-duration 属性必须设置，否则默认为0s表示不执行

**语法：**transition: property duration timing-function delay;

第一种方式：

            transition-property: background-color,width,height,transform;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay:0.5s;

第二种方式： transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

示例源代码

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title>Transition示例</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background-color: aqua;
                text-align: center;
            }
            .div1{

                /*transition-property: background-color,width,height,transform;*/
                /*transition-duration: 2s;*/
                /*transition-timing-function: linear;*/
                /*transition-delay:0.5s;*/
                transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

            }
            .div1:hover{
                background-color: fuchsia;
                width: 500px;
                height:500px;
                transform: rotate(63000deg);
            }
        </style>
    </head>
    <body>
        <div class="div1">示例</div>
    </body>
</html>

转载于:https://my.oschina.net/617669559/blog/1114040