關注前端開發
關注用戶體驗

HTML/CSS

有HTML5、CSS3等最新的HTML和CSS知識
css動畫是可以暫停的-大前端

css動畫是可以暫停的

cc閱讀(7587)贊(39)

css動畫大家都不陌生,但是你知道css動畫是可暫停的嗎?如果你不知道就來看看吧。 雖然用過很多次animation,但是也就前幾天才知道動畫是可以暫停的,可見自己對動畫的了解還是不夠深,一起來學習一下今天的主角—animati...

css性能優化-will-change-大前端

css性能優化-will-change

cc閱讀(2879)贊(20)

will-change通過告知瀏覽器該元素會有哪些變化,使瀏覽器提前做好優化準備,增強頁面渲染性能。 屬性的取值: 1、auto:? 實行標準瀏覽器優化。 2、scroll-position:? 表示開發者希望在不久后改變滾動條的位置或者使...

clip-path應用--制作地圖-大前端

clip-path應用–制作地圖

cc閱讀(3907)贊(36)

一、實現原理 clip-path屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示,區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑,也可以是一個形狀如circle()。 二、所需數據 1、剪切區...

CSS之文本兩端對齊-大前端

CSS之文本兩端對齊

cc閱讀(21305)贊(161)

說起text-align,大家一定都不覺得陌生,我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊,當然我們也使用justify來實現文本兩端對齊。 如上圖,兩端對齊相對于左對齊,視覺上顯得整齊有序。但j...

這樣的廣告請再來一打  ---  background-attachment-大前端

這樣的廣告請再來一打 — background-attachment

cc閱讀(9510)贊(60)

大多數時候,我們看到的廣告都是固定在頁面的某個位置,如下圖的首頁,一看就知道是硬廣啦。     看到標題是不是很疑惑,什么樣的廣告,想再來一打?不廢話,先來看看效果吧。 See the Pen 視覺差 by cc (@g...

初識 CSS Shapes     -----   (二)-大前端

初識 CSS Shapes —– (二)

cc閱讀(8374)贊(27)

上一篇主要介紹了通過函數方法創建矩形、圓等基本圖形,今天主要了解盒模型、圖片計算出來的形狀。 1、盒模型(包括?border-radius?的弧度) See the Pen shape-outside by cc (@glccgl) on ...

初識 CSS Shapes-大前端

初識 CSS Shapes

cc閱讀(6472)贊(34)

先來看以下效果:右側文本環圓環排版。 在未了解css shapes之前,實現這樣的排版還是挺費事的,比如為每行設置不同的padding值。但是有了css shapes之后,兩行css就搞定啦,一起來看看吧。   See the P...

CSS3-- filter(濾鏡)-大前端

CSS3– filter(濾鏡)

cc閱讀(7078)贊(26)

早前做頁面時遇到為降低贊助商板塊的注意力,將logo置灰顯示的處理,雖覺得寡淡,但因為還有其他的工作要做也就沒有想過其他的效果,最近看vue文檔(汗,其實是之前沒注意),發現首頁贊助商logo初始置灰鼠標懸停時高亮效果挺贊的,點此查看效,所...

chrome  transition閃爍BUG-大前端

chrome transition閃爍BUG

cc閱讀(15955)贊(251)

    前段時間寫鼠標懸停元素上移效果時,當鼠標恰好放在元素邊緣時,chrome出現一直上下移動的問題,其他瀏覽器表現正常。原因尚不知,可能是實現方式不對吧(PS:使用top實現),雖然不知道原因,但...

HTML5-語義化-大前端

HTML5-語義化

cc閱讀(24385)贊(264)

? ? 距HTML5標準規范制定完成并公開發布已經有好些年了,面試時也少不了要問對HTML5語義化得理解。但是在實際運用時,真正使用HTML5標簽來開發的似乎不是很多(ps:查看了幾個巨頭公司網站推論),可能一部分原因是仍有部分用戶使用在使...

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算