CSS3使用transition實(shí)現(xiàn)的鼠標(biāo)懸停淡入淡出

字號(hào):


    摘要:
    css3已經(jīng)被應(yīng)用到很多網(wǎng)站了,對(duì)于創(chuàng)建動(dòng)態(tài)交互的網(wǎng)站是非常有益的。今天就分享一個(gè)使用transition實(shí)現(xiàn)的鼠標(biāo)懸停淡陰淡出的效果。
    代碼:
    代碼如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div.demo {
    float: left;
    border:1px solid #ccc;
    }
    div.demo i {
    cursor: pointer;
    height: 50px;
    transition: opacity 2s;
    width: 50px;
    background: #000;
    float: left;
    margin: 5px;
    opacity: 0;
    }
    div.demo i:hover {
    opacity: 1;
    transition-duration: 0s;
    }
    </style>
    </head>
    <body>
    <div>
    <div>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    </div>
    </div>
    </body>
    </html>
    效果是不是非常棒,小伙伴們自由發(fā)揮下即可使用到自己的項(xiàng)目中去了。