點擊上方“前端開發博客”，選擇“星標”

每天前端開發干貨第一時間送達！

作者：郭錦榮

鏈接：https://www.cnblogs.com/jr1993/p/4743914.html

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

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

第一種效果：

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

html代碼：

<span class="shake">彈</span>

CSS代碼:

.shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-size:24px; text-align:center; line-height:40px; cursor:pointer; -webkit-transition:all 0.25s;}.shake:hover{ -webkit-animation:shake 0.25s; background: lightblue;}@-webkit-keyframes shake{ 0%,10%,55%,90%,94%,98%,100%{ -webkit-transform:scale(1,1); } 30%{ -webkit-transform:scale(1.14,0.86); } 75%{ -webkit-transform:scale(0.92,1.08); } 92%{ -webkit-transform:scale(1.04,0.96); } 96%{ -webkit-transform:scale(1.02,0.98); } 99%{ -webkit-transform:scale(1.01,0.99); }}

昨晚，看到某人的個人博客網站的回到頂部按鈕懸浮效果就是這樣子的，還是比較有趣的，不過人家的效果可能比我的好一些，大家不妨試一下。

第二種效果：

這種效果其實目前線上很多網站都在用了，不管是使用CSS3，還是jQuery，都是可以實現的。那這里我只是簡單地使用CSS3來實現。

html代碼：

<input class="search" type="text" placeholder="搜索...">

CSS代碼：

.search{ width:80px; height:40px; border-radius:40px; border:2px solid lightblue; position: absolute; right:200px; outline:none; text-indent:12px; color:#666; font-size:16px; padding:0; -webkit-transition:width 0.5s;}.search:focus{ width:200px;}

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

第三種效果：

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

html代碼：

<div class="banner"> <a href="javascript:;">博</a> <span>這是我的個人博客</span></div>

CSS代碼:

.banner{ width:234px; height:34px; border-radius:34px; position:absolute; top:400px; left:200px;}.banner a{ display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; border:2px solid lightblue; position:absolute; left:0px;top:0px; background:lightgreen; color:#fff; text-align:center; text-decoration:none; cursor:pointer; z-index:2;}.banner a:hover + span{ -webkit-transform:rotate(360deg); opacity:1;}.banner span{ display:inline-block; width:auto; padding:0 20px; height:34px; line-height:34px; background:lightblue; border-radius:34px; text-align: center; position:absolute; color:#fff; text-indent:25px; opacity:0; -webkit-transform-origin:8% center; -webkit-transition:all 1s;}

第四種效果：

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

html代碼：

<div class="banner1"> <a href="javascript:;">博</a> <span>這是我的個人博客</span></div>

CSS代碼：

.banner1{ width:234px; height:34px; border-radius:40px; position:absolute; top:400px; left:600px;}.banner1 a{ display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; border:2px solid lightblue; position:absolute; left:0px;top:0px; background:lightgreen; color:#fff; text-align:center; text-decoration:none; cursor:pointer; z-index:2;}.banner1 a:hover + span{ -webkit-transform:translateX(40px); opacity:1;}.banner1 span{ display:inline-block; width:auto; padding:0 20px; height:30px;line-height:30px; background:lightblue; border-radius:30px; text-align: center; color:#fff; position:absolute; top:2px; opacity:0; -webkit-transition:all 1s; -webkit-transform:translateX(80px);}

第五種效果：

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

html結構：

<div class="wrapper"> <div class="round"> <span>東邪</span> <span>西毒</span> <span>南乞</span> <span>北丐</span> </div></div>

CSS代碼：

.wrapper{ width:100px; height:100px; background:lightblue; border-radius:50%; border:2px solid lightgreen; position: absolute; top:200px; left:400px; cursor:pointer;}.wrapper:after{ content:'你猜'; display:inline-block; width:100px; height:100px; line-height:100px; border-radius:50%; text-align:center; color:#fff; font-size:24px;}.wrapper:hover .round{ -webkit-transform:scale(1); opacity:1; -webkit-animation:rotating 6s 1.2s linear infinite alternate;}@-webkit-keyframes rotating{ 0%{ -webkit-transform:rotate(0deg); } 100%{ -webkit-transform:rotate(180deg); }}.round{ width:240px; height:240px; border:2px solid lightgreen; border-radius:50%; position: absolute; top:-70px; left:-70px; -webkit-transition:all 1s; -webkit-transform:scale(0.35); opacity:0;}.round span{ width:40px; height:40px; line-height:40px; display:inline-block; border-radius:50%; background:lightblue; border:2px solid lightgreen; color:#fff; text-align:center; position:absolute;}.round span:nth-child(1){ right:-22px; top:50%; margin-top:-22px;}.round span:nth-child(2){ left:-22px; top:50%; margin-top:-22px;}.round span:nth-child(3){ left:50%; bottom:-22px; margin-left:-22px;}.round span:nth-child(4){ left:50%; top:-22px; margin-left:-22px;}

結語

今天這篇文章就分享到這里吧。希望對于有需要的朋友可以參考一下，也希望對大家有所幫助。感謝閱讀。

相關文章

CSS垂直居中的七個方法

20個讓你效率更高的CSS代碼技巧

我寫CSS的常用套路(附demo的效果實現與源碼）

最后

轉發文章并關注公眾號：前端開發博客，回復 1024，領取前端進階資料

回復「電子書」領取27本精選電子書

回復「加群」加入前端大神交流群，一起學習進步

回復「css」獲取 CSS 精選文章

分享和在看就是最大的支持??

總結

以上是生活随笔為你收集整理的CSS3实现5个常用的网页动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。