您好,登錄后才能下訂單哦!
這篇文章主要介紹常用CSS3網(wǎng)頁(yè)小效果有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
由于錄制gif圖片會(huì)掉幀,所以看起來不流暢,很卡,但其實(shí)實(shí)際效果還是不錯(cuò)的,有彈性一些。
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); } }
昨晚看到某人的個(gè)人博客網(wǎng)站的回到頂部按鈕懸浮效果就是這樣子的,還是比較有趣的,不過人家的效果可能比我的好一些,大家不妨試一下。
這種效果其實(shí)目前線上很多網(wǎng)站都在用了,不管是使用CSS3,還是jQuery,都是可以實(shí)現(xiàn)的。那這里我只是簡(jiǎn)單地使用CSS3來實(shí)現(xiàn)。
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; }
一般旁邊都會(huì)有一個(gè)按鈕,這里我就不做了。
這種效果也是很常用,比較多還是個(gè)人網(wǎng)站偏多。
html代碼:
<div class="banner"> <a href="javascript:;">博</a> <span>這是我的個(gè)人博客</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; }
這種提示效果就更常用了,很多網(wǎng)站都用。
html代碼:
<div class="banner1"> <a href="javascript:;">博</a> <span>這是我的個(gè)人博客</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); }
估計(jì)這種就是不常用了,自己做著玩,有興趣看一下咯:
html結(jié)構(gòu):
<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; }
以上是“常用CSS3網(wǎng)頁(yè)小效果有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。