還是整理下小程序裏所有的css屬性吧,這樣也能好查詢,按照字母表列舉:
一.a 共有15個屬性:其中9個爲動畫animation的屬性。詳情如下:
1.additive-symbols:附加符號。Counter Style的東西,僅Firefox支持。所以不詳細說了。在這篇博客中有詳細的說明。大概樣式就是像下圖這個樣子。自動生成 甲乙丙丁等等 一二三四等等的格式。
2.align-content:在flex佈局中垂直方向設置。詳見微信小程序css篇----flex佈局。
3.align-items:同align-content,不過兩個不同點在於,align-content屬性只適用於多行的flex容器,並且當側軸上有多餘空間使flex容器內的flex線對齊。而align-items是用來讓每一個單行的容器.簡單點說,按照後綴 content 是內容,整個內容在佈局中的位置,而items 是每一個子項在佈局的位置。算了 說不明白,看圖:
4.align-self:父控件是flex,設置子元素的位置。
5.all:修改所有元素或其父元素的屬性爲初始值。除了 unicode-bidi 和 direction。
6.alt:小程序中的解釋是這樣的。不過不知道怎麼用,看情況應該是隻支持Safari9
Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element.
(Safari 9)
7.animation:動畫屬性。詳細的可查看官方APIwx.createAnimation(OBJECT)
8.animation-deley:設置動畫在啓動前的延遲間隔。
9. animation-direction: 取值:alternate,alternate-reverse,normal,reverse。指定是否應該輪流反向播放動畫。
10.animation-duration: 動畫指定需要多少秒或毫秒完成。
11.animation-fill-mode: 取值:backwards,both,forwards,none。規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式。
12.animation-iteration-count:定義動畫播放的次數。取值:infinite(永遠播放),或者一個數字。
13.animation-name:屬性爲 @keyframes 動畫指定名稱。
14.animation-play-state:取值:running,pause。 指定動畫是否正在運行或已暫停。
15.animation-timing-function: 指定動畫將如何完成一個週期。
取值:linear(動畫從頭到尾的速度是一樣的。),
ease(動畫以低速開始,然後加快,在結束前變慢。),
ease-in(動畫以低速開始),
ease-out(動畫以低速結束),
ease-in-out(動畫以低速開始結束),
cubic-bezier(1, 0, 0, 1)(在cubic-bezier函數中設置值的方式。)
step-end:相當於 steps(1,end)
step-start:相當於steps(1,start)。
如何創建一個css的animation? 先看圖:
代碼就跟簡單:在wxml就只有一個 <view >我是動畫</view>。以下的都是wxss中。當然小程序的組件基本上都試過了,都可以。
要實現css的動畫,必須要知道@keyframes規則。這個規則就是創建動畫。指定一個CSS樣式和動畫將逐步從目前的樣式更改爲新的樣式。
view{width:100px;height:100px;background:red;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
注意點:不支持類選擇,id選擇。
以上就是a開頭的css屬性在小程序裏支持。
看了下b開頭的比較多,就放下面一篇裏去。微信小程序css篇----所有屬性(按字母排列:b開頭)