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