HTML前端开发之路——Transition

最新推荐文章于 2024-07-02 16:56:38 发布

weixin_34183910

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量133

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/LeslieMay/blog/614473

版权

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

Transition属性简介，transition属性有三个子属性， property，duration和time-function，property指的是变化的属性，duration指的是变化时间，time-function值得是过渡动画的形式；

transition的三个自属性可以一起写在transition当中，例如

‍‍transition：background-color 1s linear；‍‍

也可以分开来写，例如

‍transition-property: background-color;

‍transition-duration: 1s;

‍transition-timing-function: linear;‍‍‍

同时使用多个变形

transition:background-color 1s linear,
            height 1s linear,
            transform 1s linear,
            color 1s linear,
            width 1s linear;

具体实现见以下代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: #5cafa5;
            padding: 10px;
            width: 100px;
            height: 100px;
            margin: 200px auto;
            color: black;
            text-align: center;
            transition: background-color 1s linear;
            /*transition-property: background-color;*/
            /*transition-duration: 1s;*/
            /*transition-timing-function: linear;*/
 transition:background-color 1s linear,
                        height 1s linear,
                        transform 1s linear,
                        color 1s linear,
                        width 1s linear;
        }
        div:hover{
            background-color: brown;
            transform: rotate(360deg);
            height: 200px;
            width: 200px;
            color: white;
        }
    </style>
</head>
<body>
<!--transition:progertiy(属性)
dration（整个动画执行时间）
timing-function（过渡动画的形式）-->
<div>实例文字</div>
</body>
</html>