這篇文章主要介紹常用CSS3網(wǎng)頁小效果有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為荔浦企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站設(shè)計，荔浦網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

第一種效果：

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

html代碼：

彈

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);
    }
}

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

第二種效果：

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

html代碼：

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;
}

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

第三種效果：

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

html代碼：

    博
    這是我的個人博客