css：css3新特性（过渡）

时间 2020-07-12

标签 css css3 特性过渡栏目 CSS 繁體版

原文原文链接

一、过渡的理解css

（1）概念html

过渡是css3中的新特性之一，能够让咱们在不使用flash动画和js的状况下，当元素从一种样式转换为另一种样式的的时候为元素添加效果
过渡动画：从一个状态渐渐地过渡到另外一个状态的过程

（2）属性html5

花费时间：单位s，必须写
运动曲线：默认是ease，可省略
什么时候开始：单位s，必须写；能够设置延时触发事件，默认是0，可省略

二、过渡的应用css3

（1）不添加过渡效果动画

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <style>
            div {
                width: 300px;
                height: 300px;
                background-color: aqua;
            }
            
            div:hover {
                width: 340px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div>

        </div>

    </body>

</html>

（2）添加过渡效果：spa

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width   1.5s;
            }
            div:hover{
                width: 340px;
                background-color: blue;
            }
        </style>

在鼠标通过的时候是一个渐变的过程：code

（3）同时更改两个属性：htm

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width  1.5s 1s,height  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

效果展现：blog

简化写法：表示变化全部的属性事件

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: all  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

三、html5

广义的html5是html5自己和css3和js组成的