簡單的css實現的特效

點贊動畫

注意點:css

  1. 經過一張長圖,經過transition:第一個屬性來肯定要漸變的值,第二個值爲時間,第三個值爲速度大小,也能夠指定步數。也能夠經過算瀏覽器每一貞的時間來算出移動到最後一張圖片的值爲多少。
  2. 而後經過checkbox來判斷是否點讚了。用label標籤關聯input,當input被checked的時候,來操做div屬性。input:checked+label div。

美化ios系統的checkbox樣式

注意點:ios

  1. 先用css樣式畫出一個橢圓和圓,圓在裏面垂直居中,塊狀元素垂直佈局,margin會有合併,子元素的margin會成爲父元素的margin
  2. 當input被checked的時候操做label裏面的div的屬性便可

用css樣式完成輪播圖效果

本身經過在input元素下面弄成一張圖片包括裏面的信息,而後第一張默認被選中,而後設置圖片都用定位消失在窗口內,而後經過input被checked的時候,這張圖用被定爲的值恢復。瀏覽器

看了文檔上面的,實現輪播特效,是用讓四張大圖分紅四個div,每個div裏面都有四個span,裏面都是一個圖片的一部分,label和input關聯,超出的部分先overflow,而後在把四個的span的定位顯示出來,加上選中的時候的span屬性的漸變效果。有點複雜佈局

相關文章
相關標籤/搜索