-
transition事件觸發(fā)
animation不需要事件觸發(fā)查看全部 -
向上移動(dòng)
查看全部 -
由上到下動(dòng)畫(huà)效果
查看全部 -
字體下載
查看全部 -
[data-icon]所有含有data-icon的元素 然后用after偽元素加入獲取的data-icon的屬性值查看全部
-
在外面聲明@keyframes 在轉(zhuǎn)換時(shí)應(yīng)用的時(shí)我們想要的 所以一開(kāi)始應(yīng)該讓它向上移動(dòng)一段聚會(huì) 后來(lái)才下來(lái) 有文字的運(yùn)用透明度會(huì)不那么生硬 animation的animation-fill-mode 屬性： none，默認(rèn)樣式。 forwards，動(dòng)畫(huà)結(jié)束后，保留關(guān)鍵幀最后一幀的樣式。 backwards，動(dòng)畫(huà)開(kāi)始前就應(yīng)用關(guān)鍵幀第一個(gè)幀的樣式。 both，上面兩個(gè)都用上。查看全部
-
margin可以為負(fù) 當(dāng)對(duì)同一個(gè)元素的同一個(gè)屬性設(shè)置不同樣式時(shí) 選擇有限性最高的替換掉 例如這里的translateY(25%)替換掉前面繼承父元素的tranlate(50%)查看全部
-
導(dǎo)航條中被選中的.st-control與要顯示的內(nèi)容的大盒子.st-scroll 【這個(gè)大盒子裝了所有要顯示的內(nèi)容】 是兄弟關(guān)系 用~ 對(duì)于每一個(gè)對(duì)應(yīng)要顯示的板塊設(shè)置.st-scroll的y軸移動(dòng) 由于每個(gè)板塊都占100%的高 所以向下移動(dòng)translateY(-100%) 同時(shí)注意兼容性查看全部
-
給不同的設(shè)置left查看全部
-
每個(gè)板塊寬度高度都是100% 即占全屏 overflow:hidden 所以沒(méi)有滾動(dòng)條的出現(xiàn) 從而達(dá)到效果 改變的是裝所有板塊的.st-scroll 移動(dòng)式相當(dāng)于改變他的坐標(biāo) 所以設(shè)置translate 分別寫(xiě)出他不同時(shí)間段的坐標(biāo) 移動(dòng)端用translate3d可以開(kāi)啟手機(jī)的3d加速 backface-visibility：visible|hidden 不面向屏幕的時(shí)候是否可見(jiàn)查看全部
-
html5中添加新的自定義屬性 data-xxx a中鏈接#加上對(duì)應(yīng)的id類 而不是class類 每一個(gè)板塊都寫(xiě)在section里面 偶數(shù)類的背景改變可以再他們的標(biāo)簽?zāi)窃僭O(shè)一個(gè)類 而不是糾結(jié)于子元素偶數(shù)類選擇器查看全部
-
三角形的做法 雖然設(shè)置了border為20px 但現(xiàn)實(shí)出來(lái)是40px 所以后面移動(dòng)用margin-left;-20px;才是一半 (可以用margin-left 也可以用translate(x) 只要能移動(dòng)都行 靈活查看全部
-
input 與a寬度一樣 都是20% 雖然顯示還是圓 但占位仍然是20% 點(diǎn)旁邊也是有效果的 input的z-index比a大 優(yōu)先級(jí)高查看全部
-
#st-control + a 表示緊鄰元素后面的a #st-control ~ a 表示元素后面所有的a 寫(xiě)在后面的元素優(yōu)先級(jí)更高 可使用z-index改變優(yōu)先級(jí) 之后全部堆在一起了 分別給他們?cè)O(shè)置left移開(kāi)0% 20% 40% 60% 80%查看全部
-
主要的4種隱藏元素的方法 display:none 隱藏了不占位了 但visibility是隱藏了但是還占位 此例中單選按鈕雖然看不到但還是有作為的 所以前面兩張不可選查看全部
舉報(bào)
0/150
提交
取消