CSS3學習筆記（1）—淡入的文字

時間 2019-11-17

標籤 css3 css 學習筆記淡入文字欄目 CSS 简体版

原文原文鏈接

今天有空把前幾天學的東西發一下，都是一些簡單的東西，可是千里之行始於足下，我雖然走的慢，可是未停下前進的腳步,css

下來看下我作的「淡入的文字」最終動態效果：html

上面這個動畫效果製做的過程是：web

（1）先自定義一個透明度從0到1變化的動畫，而後在animation中調用這個動畫效果瀏覽器

（2）注意不一樣行文字出現的時間前後，這個經過animation中延時屬性能夠實現動畫

（3）規定文字最終動態爲動畫的最終顯示狀態，不然文字顯示完會自動消失，這個用animation-fill-mode能夠實現spa

1、先來看看HTML中程序：code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>淡入的文字</title>
        <link type="text/css" rel="stylesheet" href="css/animate.css" />
    </head>
    <body>
        <div class="fade-in-words">
            <div class="first-words">山一程，水一程，</div>
            <div class="second-words">身向榆關那畔行，</div>
            <div class="third-words">夜深千賬燈。</div>
            <div class="four-words">風一更，雪一更，</div>
            <div class="five-words">聒碎鄉心夢不成，</div>
            <div class="six-words">故園無此聲。</div>
        </div>
    </body>
</html>

上面這段程序主要是先把文字呈現出來，我隨便找了一首詩啦~~~~~你們不要去猜它的意思QAQhtm

2、看看CSS樣式（主要是CSS3）blog

.fade-in-words{
    width: 200px;
    margin: 0 auto;
    text-align: center;
}

/*自定義一個透明度從0到1的動畫，它的名稱是fade-in*/
@keyframes fade-in{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{ 
    opacity: 0;      /*實先規定文字的狀態是不顯示的*/
    animation: fade-in 4s ease 0s 1;    /*調用名稱爲fade-in的動畫，全程動畫顯示時間4S，進入方式爲ease，延時0S進入，播放次數1次*/
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.second-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 2s 1;
    -webkit-animation: fade-in 4s ease 2s 1;
    -moz-animation: fade-in 4s ease 2s 1;
    -o-animation: fade-in 4s ease 2s 1;
    -ms-animation: fade-in 4s ease 2s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.third-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 4s 1;
    -webkit-animation: fade-in 4s ease 4s 1;
    -moz-animation: fade-in 4s ease 4s 1;
    -o-animation: fade-in 4s ease 4s 1;
    -ms-animation: fade-in 4s ease 4s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.four-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 6s 1;
    -webkit-animation: fade-in 4s ease 6s 1;
    -moz-animation: fade-in 4s ease 6s 1;
    -o-animation: fade-in 4s ease 6s 1;
    -ms-animation: fade-in 4s ease 6s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.five-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 8s 1;
    -webkit-animation: fade-in 4s ease 8s 1;
    -moz-animation: fade-in 4s ease 8s 1;
    -o-animation: fade-in 4s ease 8s 1;
    -ms-animation: fade-in 4s ease 8s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.six-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 10s 1;
    -webkit-animation: fade-in 4s ease 10s 1;
    -moz-animation: fade-in 4s ease 10s 1;
    -o-animation: fade-in 4s ease 10s 1;
    -ms-animation: fade-in 4s ease 10s 1;
    
    /*規定動畫的最後狀態爲結束狀態*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

上面的程序我在註釋裏面都寫得很清楚，感興趣的能夠看我寫的註釋，我以爲比較簡單，沒有難度，可是須要注意瀏覽器前綴的添加，不然你懂得.utf-8