CSS3

分享CSS3新技術,CSS3動畫,CSS3特效,CSS3代碼和CSS3相關資源

自從CSS3有了Flex,從此布局是浮云,本文全面的講解了Flex布局的屬性,幫助你快速入門Flex布局,一起來看看這篇Flex布局入門教程。

30 seconds of css是跟30 seconds of code 類似的項目,翻譯中文版已經很久了,今天列舉幾個自己覺得比較有用的片段,使用CSS3實現某些前端效果,還是挺炫酷的。

隱藏滾動條的同時還需要支持滾動,我們經常在前端開發中遇到這種情況,最容易想到的是加一個iscroll插件,但其實現在CSS也可以實現這個功能,我已經在很多地方使用了,下面一起看看這三種方法。

CSS3 transform里面有一個屬性transform-origin,該屬性可以改變元素的原點位置,之前的一篇文章:CSS揭秘之沿著環形路徑運動的動畫,正是巧妙的運用了原點位置,從而實現了圍繞圓心運動。transform-origin里面的百分比沒有詳細了解是以什么為標準的。今天看看這篇文章詳細了介紹了這個值跟left、right、top、bottom之間的關系。

使用flexbox,很多布局問題都可以解決,今天分享一個所有子元素居中對齊的樣式。

涉及到居中的樣式CSS主要是align-items:center;

需求是需要中間的某個塊不要占全部,而是自適應子元素內容擴展。

本文分享幾種通用的前端開發中圖片垂直水平居中對齊的做法,大部分適用在高級瀏覽器,可以應用在移動端,有絕對定位、flexbox、table-cell和增加一個空白標簽。

除了html5的新特性,CSS3的新特性也是面試中經常被問到的。本文分享了一些CSS3選擇器、Transition,Transform和Animation等

vw : 1vw 等于視口寬度的1%,vh : 1vh 等于視口高度的1%。本文介紹純CSS視口單位vw和vh來自行自適應,雖然現在的兼容性還沒法完全能夠接受,但不妨礙你認識這個vw和vh的強大。

由于視口單位涉及到計算,有一段時間我是抵制在工作使用視口單位。但就在上周,我克服了心中的抵制情緒,開始去了解視口單位在網頁排版中的使用。在深入介紹視口單位以及其在網頁排版中的工作原理時,先了解下有哪些常見的視口單位。

視口(viewport)單位,使流體排版在頁面上應用變為可能。視口單位是根據瀏覽器的視口尺寸的百分比來定義的。舉個例子,1視口寬度(vw)等于視口寬度的1%,它不同于百分比的地方是,它的寬度是依賴于視口的寬度的,而百分比是元素的祖先元素來決定的。

rem 和 em 單位是由瀏覽器基于你的設計中的字體大小計算得到的像素值。em 單位基于使用他們的元素的字體大小。rem 單位基于 html 元素的字體大小。em 單位可能受任何繼承的父元素字體大小影響。rem 單位可以從瀏覽器字體設置中繼承字體大小。

《CSS揭秘》里面發現一個很獨特的一個動畫,使用純CSS3動畫讓一個元素沿著環形路徑運動。聽起來有點不可思議,本文將帶你一起走進作者的文章中,由復雜到簡單,由多個結構到簡單結構解剖CSS3語句實現環形運動。

CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作。例如,我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。本文分析了calc()的計算使用方法及兼容性

本文通過兩個思路介紹了純CSS實現多行內容超出時加省略號的代碼,一種是支持webkit的瀏覽器,使用CSS3屬性-webkit-line-clamp來限制行數,一種是通過加了一個絕對定位的偽元素來偽造一個省略號放在文字的最后面。常用第二種,兼容性較好。

這個CSS翻轉卡片效果是在鼠標滑過上面的時候會有一個炫酷的旋轉,顯示下面的后面卡片,并且有發光的效果。下面分享一下這個代碼:

這個 CSS3 類似于幻燈片旋轉的效果,是一個比較有意思并且比較受歡迎的特效。之前沒有去研究過,無意在博客上看到 Wenzi 寫了這個東西,來看看他的代碼是怎么實現的。

首頁  上一頁  1 2 3 4 5 6 下一頁  尾頁