WEB前端第十七課——CSS動畫

時間 2020-08-06

標籤 web 前端第十七 css 動畫欄目 HTML 简体版

原文原文鏈接

1.animation動畫html

　　transition屬性只能簡單模擬動畫效果，而animation屬性能夠製做相似Flash動畫web

　　經過關鍵幀控制動畫的每一步，使元素從一中樣式變爲另外一種樣式，實現複雜的動畫效果測試

2.@keyframes，用於聲明動畫，指定關鍵幀動畫

　　幀，用於分解動畫動做，每一幀表明某個時間點url

　　書寫格式：spa

　　@keyframes name（自定義名稱）{orm

　　　　from | 0% {　　CSS樣式　　}htm

　　　　percent | n% {　　CSS樣式　　}blog

　　　　to | 100% {　　CSS樣式　　}three

　　}

3.animation屬性，用於調用及控制由@keyframes定義的動畫

　　簡寫屬性書寫格式：animation：name duration timing-function delay iteration-count direction

　　animation-name，設置須要調用的@keyframes動畫的名稱

　　animation-duration，播放動畫持續的時間週期，時間單位 s/ms

　　animation-timing-function，設置動畫播放的時間曲線，屬性值與 transition-timing-function相同，包括 linear、ease、ease-in、ease-out、ease-in-out等

　　animation-delay，設置動畫什麼時候開始（延遲時間）

　　animation-iteration-count，設置動畫播放的次數，屬性值：n（數值，默認爲1）、infinite（無限次/永遠）

　　animation-direction，設置循環交替時反向播放動畫，

　　　　　　　　　　　屬性值：normal（正常播放，默認）、reverse（反向播放）、alternate（奇數次正向播放、偶數次反向播放）、alternate-reverse（奇數次反向播放、偶數次正向播放）

　　animation-fill-mode，規定當動畫未播放時（播放完或開始前）應用到元素的樣式，

　　　　　　　　　　　屬性值：none（無樣式，默認）、forwards（在動畫結束後（由animation-iteration-count決定）應用該屬性值）、

　　　　　　　　　　　　　　　　backwards（應用在animation-delay定義期間啓動動畫的第一次迭代的關鍵幀中定義的屬性值）

　　　　　　　　　　　　　　　　both（同時遵循forwards和backwards 的規則）

　　animation-play-state，運行或暫停動畫，屬性值：paused（暫停）、running（運行，默認）

4.輪播圖測試代碼

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_animation</title>
    <style>
        .cont{
            width: 600px;
            height: 600px;
            background-color: #e5e5e5;
            margin: 50px auto;
            background-image: url("images/number/one.jpg");
            background-repeat: no-repeat;
            background-position: center;
            -webkit-animation: rot 8s ease-in 1s 3 alternate forwards;
        }
        @-webkit-keyframes rot {
            0%{
                background-image: url("images/number/one.jpg");
            }
            25%{
                background-image: url("images/number/two.jpg");
            }
            50%{
                background-image: url("images/number/three.jpg");
            }
            75%{
                background-image: url("images/number/four.jpg");
            }
            100%{
                background-image: url("images/number/five.jpg");
            }
        }
    </style>
</head>
<body>
    <div class="cont">
    </div>
</body>
</html>

5.border繪製三角形、梯形

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_graph</title>
    <style>
        .cont{
            width: 0px;    /* width=0時，三角形；width>0時，梯形；其餘三個方向設置同理 ’*/
            /*height: 100px;*/
            background-color: transparent;
            margin: 100px auto;
            /*border-top: 120px solid red;*/
            border-right: 120px solid transparent;
            border-bottom: 120px solid green;
            border-left: 120px solid transparent;
        }
    </style>
</head>
<body>
    <div class="cont">
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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