5個很常用的CSS3網頁小例項

由於最近比較忙，自己也沒有很充裕的時間可以去做比較豐富的案例。我擠出時間來製作這幾個很常用的css3網頁小效果。

最近寫js的時間比例比較多，不過我還是比較鍾情於css3。所以我還是堅持分享一些實用的css3小例子。這次由於時間有限，就做了幾個相對比較簡單的例子。我們一起來看一下。

由於錄製gif會掉幀，所以看起來不流暢，很卡，但其實實際效果還是不錯的，有彈性一些。

html**：

彈

css**:

.shake.shake:hover@-webkit-keyframes shake30%75%92%96%99%}

昨晚，看到某人的個人部落格**的回到頂部按鈕懸浮效果就是這樣子的，還是比

較有趣的，不過人家的效果可能比我的好一些，大家不妨試一下。

這種效果其實目前線上很多**都在用了，不管是使用css3，還是jquery，都是可以實現的。那這裡我只是簡單地使用css3來實現。

html**：

css**：

.search.search:focus

一般旁邊都會有乙個按鈕，這裡我就不做了。

這種效果也是很常用，比較多還是個人**偏多。

html**：

博這是我的個人部落格

css**:

.banner.banner a.banner a:hover + span.banner span

第四種效果：

這種提示效果就更常用了，很多**都用。

html**：

博這是我的個人部落格

css**：

.banner1.banner1 a.banner1 a:hover+span.banner1 span

估計這種就是不常用了，自己做著玩，有興趣看一下咯：

html結構：

東邪西毒南乞北丐

css**：

width: 100px;height: 100px;background: lightblue;border-radius: 50%;border: 2px solid lightgreen;position: absolute;top: 200px;left: 400px;cursor: pointer;}content: '你猜';display: inline-block;width: 100px;height: 100px;line-height: 100px;border-radius: 50%;text-align: center;color: #fff;font-size: 24px;}-webkit-transform: scale(1);opacity: 1;-webkit-animation: rotating 6s 1.2s linear infinite alternate;}@-webkit-keyframes rotating100%}.round.round span.round span:nth-child(1).round span:nth-child(2).round span:nth-child(3).round span:nth-child(4)

結語

5個很常用的CSS3網頁小例項

CSS3網頁固定背景視覺差特效

html5 網頁開發 css爬坑小技巧速查

CSS教程 7 網頁段落行間距控制的例項

5個很常用的CSS3網頁小例項

CSS3網頁固定背景視覺差特效

html5 網頁開發 css爬坑小技巧速查

CSS教程 7 網頁段落行間距控制的例項

相關推薦