css3中的動畫效果

時間 2019-11-26

標籤 css3 css 動畫效果欄目 CSS 简体版

原文原文鏈接

css3中的animation屬性動畫效果代碼以下:css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3的animation功能</title>
    <style>
        div{
            background:#ff0000;
            color:white;
            width:200px;
            position:absolute;
            top:200px;
            left:200px;
        }
        @-webkit-keyframes myTest {
            /*開始幀*/
            0%{
                background:#ff0000;
                transform: rotate(0deg);
            }
            25%{
                background:#0000ff;
                transform:rotate(30deg);
            }
            50%{
                background:#fff000;
                transform:rotate(0deg);
            }
            75%{
                background:#000000;
                transform:rotate(-30deg);
            }
            100%{
                /*結束幀*/
                background:#00ff00;
                transform:rotate(0deg);
            }
        }
        div:hover{
            -webkit-animation:myTest 5s linear;
        }
    </style>
</head>
<body>
<div>this is a test text</div>
</body>
</html>

css3中的transition屬性動畫效果:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition屬性</title>
    <style>
        /*transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：*/
        /*transition-property:規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）*/
        /*transition-duration:規定完成過渡效果須要多少秒或毫秒(請始終設置 transition-duration 屬性，不然時長爲 0，就不會產生過渡效果。)*/
        /*transition-timing-function:規定速度效果的速度曲線(linear:勻速)*/
        /*transition-delay:定義過渡效果什麼時候開始(延遲時間，默認0s)*/
        div{
            background:#fff000;
            width:200px;
            transition: background 3s linear,color 1s linear,width 2s linear,transform 2s linear;
        }
        div:hover{
            background:#ff0000;
            color:#fff;
            width:600px;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div>this is a test text</div>
</body>
</html>

相關標籤/搜索

每日一句

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