CSS3使用transition實現的鼠標懸停淡入淡出
來源：易賢網 閱讀：3714 次 日期：2015-02-06 13:54:16
溫馨提示：易賢網小編為您整理了“CSS3使用transition實現的鼠標懸停淡入淡出”,方便廣大網友查閱！

摘要：

css3已經被應用到很多網站了，對于創(chuàng)建動態(tài)交互的網站是非常有益的。今天就分享一個使用transition實現的鼠標懸停淡陰淡出的效果。

代碼：

代碼如下:

<!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 class="demo">

<div>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

</div>

</div>

</body>

</html>

效果是不是非常棒，小伙伴們自由發(fā)揮下即可使用到自己的項目中去了。

更多信息請查看IT技術專欄

更多信息請查看網頁制作
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網