微信小程序css樣式以a,b開頭的屬性
2017年,微信小程序css樣式已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦騝ss樣式相關(guān)的內(nèi)容。
整理下小程序里所有的css屬性吧,這樣也能好查詢,按照字母表列舉:
a 共有15個(gè)屬性:其中9個(gè)為動(dòng)畫animation的屬性。詳情如下:
1.additive-symbols:附加符號(hào)。Counter Style的東西,僅Firefox支持。所以不詳細(xì)說了。在這篇博客中有詳細(xì)的說明。大概樣式就是像下圖這個(gè)樣子。自動(dòng)生成 甲乙丙丁等等 一二三四等等的格式。
2.align-content:在flex布局中垂直方向設(shè)置。詳見微信小程序css篇----flex布局。
3.align-items:同align-content,不過兩個(gè)不同點(diǎn)在于,align-content屬性只適用于多行的flex容器,并且當(dāng)側(cè)軸上有多余空間使flex容器內(nèi)的flex線對(duì)齊。而align-items是用來讓每一個(gè)單行的容器.簡單點(diǎn)說,按照后綴 content 是內(nèi)容,整個(gè)內(nèi)容在布局中的位置,而items 是每一個(gè)子項(xiàng)在布局的位置。算了 說不明白,看圖:
4.align-self:父控件是flex,設(shè)置子元素的位置。
5.all:修改所有元素或其父元素的屬性為初始值。除了 unicode-bidi 和 direction。
6.alt:小程序中的解釋是這樣的。不過不知道怎么用,看情況應(yīng)該是只支持Safari9
Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element.
(Safari 9)
7.animation:動(dòng)畫屬性。詳細(xì)的可查看官方APIwx.createAnimation(OBJECT)
8.animation-deley:設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。
9. animation-direction: 取值:alternate,alternate-reverse,normal,reverse。指定是否應(yīng)該輪流反向播放動(dòng)畫。
10.animation-duration: 動(dòng)畫指定需要多少秒或毫秒完成。
11.animation-fill-mode: 取值:backwards,both,forwards,none。規(guī)定當(dāng)動(dòng)畫不播放時(shí)(當(dāng)動(dòng)畫完成時(shí),或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)),要應(yīng)用到元素的樣式。
12.animation-iteration-count:定義動(dòng)畫播放的次數(shù)。取值:infinite(永遠(yuǎn)播放),或者一個(gè)數(shù)字。
13.animation-name:屬性為 @keyframes 動(dòng)畫指定名稱。
14.animation-play-state:取值:running,pause。 指定動(dòng)畫是否正在運(yùn)行或已暫停。
15.animation-timing-function: 指定動(dòng)畫將如何完成一個(gè)周期。
取值:linear(動(dòng)畫從頭到尾的速度是一樣的。),
ease(動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。),
ease-in(動(dòng)畫以低速開始),
ease-out(動(dòng)畫以低速結(jié)束),
ease-in-out(動(dòng)畫以低速開始結(jié)束),
cubic-bezier(1, 0, 0, 1)(在cubic-bezier函數(shù)中設(shè)置值的方式。)
step-end:相當(dāng)于 steps(1,end)
step-start:相當(dāng)于steps(1,start)。
如何創(chuàng)建一個(gè)css的animation? 先看圖:
代碼就跟簡單:在wxml就只有一個(gè) 我是動(dòng)畫。以下的都是wxss中。當(dāng)然小程序的組件基本上都試過了,都可以。
要實(shí)現(xiàn)css的動(dòng)畫,必須要知道@keyframes規(guī)則。這個(gè)規(guī)則就是創(chuàng)建動(dòng)畫。指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。
[html] view plain copy
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;}
}
注意點(diǎn):不支持類選擇,id選擇。
以上就是a開頭的css屬性在小程序里支持。
看了下b開頭的比較多,就放下面一篇里去。
微信小程序css篇----所有屬性(按字母排列:b開頭)
今天星期六,本來想著先玩兩把LOL,不過一想到后天小程序就全面公布了,細(xì)思極恐啊,為了到開發(fā)的時(shí)候順暢,還是忍住了玩的沖動(dòng),繼續(xù)來熟悉微信小程序里的對(duì)css屬性的支持,因?yàn)閎開頭的比較多,大概就是bg了,border,bottom,box等等屬性,先上圖看看有多少:
以上,那詳細(xì)來看看,分個(gè)幾大類吧:
一:backface-visibility:屬性定義當(dāng)元素不面向屏幕時(shí)是否可見。就是在動(dòng)畫里旋轉(zhuǎn)后,背面是不是顯示。取值有:visible(可見),hidden(不可見)。
二:background,背景。之前有單獨(dú)寫背景看這里。
三:behavior:只有IE支持這個(gè)屬性。就不說了。
四:block-size:邏輯寬度,取決于元素的writing-mode。Firefox支持。
五:border:邊框。
六:bottom:設(shè)置圖像的底部邊緣。
對(duì)于絕對(duì)定位元素,bottom屬性設(shè)置單位高于/低于包含它的元素的底邊。
對(duì)于相對(duì)定位元素,bottom屬性設(shè)置單位高于/低于其正常位置的元素的底邊。
七:box:盒子屬性:
1. box-decoration-break: 取值:clone(克隆),slice(片式)。詳情,還是看圖:
2.box-shadow:陰影: box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平陰影位置,允許負(fù)值。必須有
v-shaddow:垂直陰影的位置,允許負(fù)值。必須有
blur:模糊距離,可有。
spread:陰影的大小,可有。
color:陰影的顏色??捎?/span>
inset:從外層的陰影(開始時(shí))改變陰影內(nèi)側(cè)陰影。
3.box-size:取值:box-sizing: content-box|border-box|inherit:
兩個(gè)取值的區(qū)別在于是否會(huì)將pandding/margin算進(jìn)去。
[html] view plain copy
view{
margin: 20rpx;
padding: 20rpx;
width: 200rpx;
height: 200rpx;
box-shadow: 10px 10px 5px #888888;
box-sizing:content-box;
}
八:break-after,break-before,break-inside:主要是頁面要是分頁的時(shí)候?qū)傩浴?/span>
-
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡單
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡單,只需要五步就可以完成,整個(gè)過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分:如何開通一個(gè)小商店