微信小程序小教程--幾個有趣的css3動畫
先看下效果:
除了有點快,動畫效果還可以。
它是怎么實現(xiàn)的?
拿第一個雙塊舞動畫研究一下好啦。
mxml:
class="sk-wandering-cubes">
class="sk-cube sk-cube1">
class="sk-cube sk-cube2">
css:
.sk-wandering-cubes .sk-cube {
background-color: #67cf22;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
}
.sk-wandering-cubes .sk-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-wanderingCube {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
transform: translateX(30px) rotate(-90deg) scale(0.5);
}
50% {
/* Hack to make FF rotate in the right direction */
-webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
transform: translateX(30px) translateY(30px) rotate(-179deg);
}
50.1% {
-webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
transform: translateX(30px) translateY(30px) rotate(-180deg);
}
75% {
-webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
是用css3動畫樣式實現(xiàn)的效果。sk-wanderingCube是自定義的動畫名稱,并非css3預(yù)定義的。
如果將兩個方塊,加到3個,如何?
添加一個sk-cube3,及其對應(yīng)的新式?
class="sk-cube sk-cube3">
.sk-wandering-cubes .sk-cube3 {
-webkit-animation-delay: -0.45s;
animation-delay: -0.45s;
}
運行一下,不失所望:
(實際運行效果沒有這么快,不知為什么用QQ截取動畫后就變快了~)
如果把動畫改慢一點,讓三個方塊,平均分布也是可以的,讓其在空間上平均分布,即是讓它們平均動畫時間。
達到這樣的效果,修改每楨間隔0.6s就可以了:
.sk-wandering-cubes .sk-cube {
background-color: #67cf22;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
}
.sk-wandering-cubes .sk-cube2 {
-webkit-animation-delay: -0.6s;
}
.sk-wandering-cubes .sk-cube3 {
-webkit-animation-delay: -1.2s;
}
此外,animation-delay是標準名稱,-webkit-animation-delay是safafi與chrome支持的名稱,其它以-webkit-開頭的css樣式名是類似的。
如果只保留-webkit-*聲明,如上所示。在微信web開發(fā)者工具上運行正常,因為它是基于chrome同樣的內(nèi)核渲染的css3樣式。在android手機上也可以,親測。在ios上沒有測試,有興趣的同學(xué)不妨測試下。
一般情況下,標準名稱與webkit名稱是同時定義的。
關(guān)于動畫的說明
使用@keyframes規(guī)則,你可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。
在動畫過程中,您可以更改CSS樣式的設(shè)定多次。指定的變化時發(fā)生時使用%,或關(guān)鍵字"from"和"to",這是和0%到100%相同。0%是開頭動畫,100%是當動畫完成。
為了獲得最佳的瀏覽器支持,您應(yīng)該始終定義為0%和100%的選擇器。
注意: 使用animation屬性來控制動畫的外觀,還使用選擇器綁定動畫。.
綁定動畫的語法有些復(fù)雜:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值說明animation-name指定要綁定到選擇器的關(guān)鍵幀的名稱animation-duration動畫指定需要多少秒或毫秒完成animation-timing-function設(shè)置動畫將如何完成一個周期animation-delay設(shè)置動畫在啟動前的延遲間隔。animation-iteration-count定義動畫的播放次數(shù)。animation-direction指定是否應(yīng)該輪流反向播放動畫。animation-fill-mode規(guī)定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應(yīng)用到元素的樣式。animation-play-state指定動畫是否正在運行或已暫停。initial設(shè)置屬性為其默認值。 閱讀關(guān)于 initial的介紹。inherit從父元素繼承屬性。 閱讀關(guān)于 initinherital的介紹。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)