這篇文章帶大家深入解析如何實現動畫效果,透過動畫來快速學習 css ,希望對大家有幫助!
隨著業務對前端的需求越來越多,身為前端三大法寶之一的css也越變越複雜。給初學的同學們帶來了一定的壓力。 css具體到每一個屬性也都沒有多複雜,主要問題在於知識點比較多。好不容易把主要知識點學完了,一看網路上的題,或是一看大師們寫的css的書,又被淹沒到新的海洋中。
其實人類的大腦不善於記憶零散的知識點,但是如果有一條邏輯線能夠將這些知識串聯起來,就能大大方便大腦的記憶和搜尋。這個線索要有邏輯,最好還是有趣。
剛好,css的動畫就是這樣一個有趣的線索,可以在動畫的變化中理解css屬性。
例如我們知道css增加了圓角矩形的border-radius屬性,那麼設定不同大小的圓角,是什麼樣的效果呢?與其一次次地改大小去試驗,不如我們做成一個動畫讓其一目了然:
我們還可以讓其移動位置中變形:
甚至我們還能讓其轉圈:
在串起其它屬性之前,我們先理解下動畫。
動畫的核心關鍵字在於「動」。 我們要回答幾個問題:
這些問題的結果,就構成了一個動畫的構成要素。
首先是動的主體是什麼?就是我們的HTML標籤,或是標籤構成的複雜元件之類的。對我們來說,主要就是
transition動畫
我們先學習一個簡單的css屬性動畫,叫做transition。 它就是由上面的4個屬性組成的:
我們來看個例子:
#hellocss { transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; }
這個動畫指定的意思是說,如果寬度width變化了,則延遲一秒鐘運行5秒寬度變化的動畫。變化速度是等速率的。
為了看得清楚,我們設一個初始的width,再加上一個背景色和前景色:
<style> #hellocss { background-color: blue; color: yellow; width: 20px; transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; } </style>
既然是動畫,那麼要有變化。 於是我們寫兩句javascript:
<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>
然後找個事件來觸發這個變化,例如我們在頁面載入時來做:
Hello,HTMLHello,CSS<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>
完整的程式碼如下:
<style> #hellocss { background-color: blue; color: yellow; width: 20px; transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; } </style>Hello,HTMLHello,CSS<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>
熟練了之後,我們也可以將4個屬性簡寫成一個:
transition: width 5s linear 1s;
如果沒有延時,第4項可以不寫。 如果採用先慢後快的ease方式,第3項也可以省略。 如果第一項是什麼變都動,可以寫成all。 但是第二項動畫時長不能不寫,不寫預設是0秒,就啥也沒有了。
所有的可以線性計算的屬性都可以用來進行動畫。除了寬、高、位置等容易理解的座標屬性,顏色屬性也是常被用來做動畫的好場景。 我們來看一個從藍底黃字到白底黑字的動畫過程:
#
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #hellocss { background-color: blue; color: yellow; transition: all 10s linear 1s; } </style> </head> <body onload="trans1()"> <div>Hello,HTML</div> <div id="hellocss">Hello,CSS</div> <script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.backgroundColor = "white"; hcss1.style.color="red"; } </script> </body> </html>
##keyframes動畫
上面的transition比較簡單,針對於例如要循環多少次,或者變過去還要再變回來,或者中間要變幾次等,我們就需要指定更多的屬性。這些需求就由keyframes動畫來滿足。 keyframes動畫的好處就是起點和終點都在keyframes中指定,不用再寫事件去改變了, 全部在css中完成:@keyframes color_change{ from { background-color: blue; color: yellow; } to { background-color: white; color: black; } }
然后我们在一个css选择器里面去引用定义好的keyframes动画,同时指定动画时长、变化曲线和延时:
#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; }
到了keyframes动画,我们终于可以指定播放多少次了,比如连播三次:
#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 3; }
甚至可以无限性地播放下去:
animation-iteration-count: infinite;
光循环播还不过瘾,我们还想先正着变,然后再变回来,我们可以将方向设为交替播放:
animation-direction: alternate;
把上面的综合在一起,大家跑起来看看:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> @keyframes color_change { from { background-color: blue; color: yellow; } to { background-color: white; color: black; } } #hellocss { animation-name: color_change; animation-duration: 5s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; } </style> </head> <body> <div>Hello,HTML</div> <div id="hellocss">Hello,CSS</div> </body> </html>
而其实呢,from和to,分别是0%和100%的别名,也可以这么写:
@keyframes color_change { 0% { background-color: blue; color: yellow; } 100% { background-color: white; color: black; } }
这样我们可以增加百分比,让变化变得更有趣一些:
@keyframes color_change { 0% { background-color: blue; color: yellow; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: white; color: black; } }
最后,如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现,比如我们让点击第一个div来实现暂停功能:
<body> <div onclick="trans1()">Hello,HTML</div> <div id="hellocss">Hello,CSS</div> <script> function trans1() { let hcss1 = document.getElementById("hellocss"); hcss1.style.animationPlayState = "paused"; } </script> </body>
我们现在终于可以看看开篇时的第一个动画是如何写成的了:
@keyframes color_change { 0% { background-color: blue; color: yellow; border-radius: 0px; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; } }
平面移动:transform:translate属性
最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画:
我们先让变色的圆角矩形向下移100px,然后再右移100px:
0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px) } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px) } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px) } }
旋转:transform:rotate属性
最后我们看旋转属性。
@keyframes color_change{ 0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px); transform:rotate(0deg); } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px); transform:rotate(90deg); } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px); transform:rotate(180deg); } }
让我们回归基础,通过动画来了解盒子模型。
所谓盒子,最基础的就是宽和高。 这没啥可说的,来个宽高动画先体验一下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> @keyframes box_change { 0% { height: 50px; width: 50px; } 50% { height: 200px; width: 50px; } 100% { height: 200px; width: 200px; } } .box1 { background-color: blue; color: yellow; opacity: 0.65; animation-name: box_change; animation-duration: 10s; animation-delay: 1s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate; } </style> </head> <body> <div class="box1">Hello Box</div> </body> </html>
除了宽高之外,盒子有边框,边框内部有padding,边框外面还有margin。
包括边框在内,都分为top, bottom, left, right四个方向:
border-width: 5px; border-top-color: #f5222d; border-bottom-color: #cf1322; border-left-color: #a8071a; border-right-color: #820014; padding: 10px; margin: 15px;
我们现在给边框加上颜色和形状,带着margin和padding动起来看看效果:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> @keyframes box_change { 0% { height: 50px; width: 50px; border-style: solid; } 50% { height: 200px; width: 50px; border-style: dotted; } 100% { height: 200px; width: 200px; border-style: dashed; } } .box1 { background-color: blue; color: yellow; border-width: 5px; border-top-color: #f5222d; border-bottom-color: #cf1322; border-left-color: #a8071a; border-right-color: #820014; padding: 10px; margin: 15px; animation-name: box_change; animation-duration: 10s; animation-delay: 1s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate; } </style> </head> <body> <div class="box1">Hello Box</div> </body> </html>
打开chrome的开发者工具,我们可以更清楚地看清content, padding, border, margin, 之间的关系:
Border取5px只是为了让其更容易被识别,但是太丑了,我们将其改为2px。效果就好得多了:
(学习视频分享:css视频教程)
以上是一文透過動畫來快速學習 css !的詳細內容。更多資訊請關注PHP中文網其他相關文章!