慕課七夕言情知識點總結

時間 2019-11-16

標籤七夕知識總結简体版

原文原文鏈接

引入

　　爲了複習H五、CSS3按照慕課網的教程實現一個七夕言情的demo學到（+複習了）不少知識~在此總結一番css

知識點

transform

定義html

　 transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。web

值動畫

應用 ui

　　若是transform與transition聯合起來用，就能實現絢麗的動畫效果，for example~可是若是直接應用在某個元素上，spa
 transform屬性是靜態屬性，不是動畫屬性，一旦寫到style裏面，將會直接顯示做用，無任何變化過程
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        height: 100px;
        width: 100px;
        background-color: red;
        margin-top: 100px;
        margin-left: 200px;
        border-radius: 100%;
    }
    div:hover{
        transform: rotate(50deg);
        transition:1s;
    }
    </style>
</head>
<body>
    <div>我是一個圓</div>
</body>
</html>

animation

定義code

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：orm

animation-name 規定須要綁定到選擇器的 keyframe 名稱
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計
animation-timing-function 規定動畫的速度曲線。（linear、ease、ease-in、ease-out、ease-in-out、step-start、

step-end、steps(<number>[, [ start | end ] ])）htm

animation-delay 規定在動畫開始以前的延遲。
animation-iteration-count 規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫。

   .slowWalk {
    /*規定 @keyframes 動畫的名稱。*/
    -webkit-animation-name: person-slow; 
    /*規定動畫完成一個週期所花費的秒或毫秒。默認是 0*/
    -webkit-animation-duration: 950ms;
    /*規定動畫被播放的次數。默認是 1。 infinite(循環播放)*/
    -webkit-animation-iteration-count: infinite;
    /*動畫切換的方式是一幀一幀的改變*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    }
    
    /* 普通慢走 */
    
    @-webkit-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }
    
    @-moz-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }

transition

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：blog

transition-property 規定設置過渡效果的 CSS 屬性的名稱。

transition-duration 規定完成過渡效果須要多少秒或毫秒。

transition-timing-function 規定速度效果的速度曲線。（linear、ease、ease-in、ease-out...）

transition-delay 定義過渡效果什麼時候開始。

animation暫停動畫和transition暫停

.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}

可是若是要中止transition運動的話，強制改變目標過渡值的處理

 var left = $boy.css('left');
// 強制作了一個改變目標left的處理
// 動畫是要運行10秒,因此此時動畫仍是沒有結束的
 $boy.css('left',left);
// 增長暫停的樣式
 $boy.addClass('pauseWalk');

可是這樣是有問題的，下一次的啓動必須等上一次動畫的時間結束

　　關於動畫的知識點已經總結完，接下來的待續噢~

相關標籤/搜索

每日一句

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