純CSS3實現的藍天白雲效果

今天我使用了css3新增的屬性border-radius、linear-gradient、scale(縮放)和一些布局技巧實現了藍天白雲的效果。其html結構如下：

class="container">

class="bluesky">

class="cloud1">div>

class="cloud2">div>

class="cloud3">div>

class="cloud4">div>

class="cloud5">div>

div>

class="grassland">div>

div>

實現藍天的css樣式：

.bluesky

.grassland

.cloud1

.cloud1
:after
.cloud1
:before

怎麼樣？css3是不是很有趣啊，大家趕緊嘗試一下吧。

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...

純css3實現圓盤時鐘動畫效果

先讓我們來看下整體效果，請看下圖 作為小白的我，看到別人寫的鐘錶特效有點心動，於是自己也動手寫了乙個，主要是為了練練腦子，接下來直接看 html css樣式 t2 t3.t3 before t3 after t4.t4 i.t4 before t4 after hour hour3 hour6 ho...