微信小程序css篇----所有屬性(按字母排列:a開頭)

還是整理下小程序裏所有的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開頭)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章