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組成的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。