手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3使用transition实现的鼠标悬停淡入淡出
CSS3使用transition实现的鼠标悬停淡入淡出
摘要:摘要:css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果...

摘要:

css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的。今天就分享一个使用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>

<div>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

</div>

</div>

</body>

</html>

效果是不是非常棒,小伙伴们自由发挥下即可使用到自己的项目中去了。

【CSS3使用transition实现的鼠标悬停淡入淡出】相关文章:

用CSS实现垂直居中的3种方法

css实现鼠标滑过改变文字(中文变英文)

CSS多列布局实现方法大全

CSS应用基础教程(3) 应用补充

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

CSS3 transition规范的实际使用经验

一款纯css实现的垂直时间线效果

CSS:CSS样式如何实现Logo立体盒子效果

使用CSS代码的空格实现中文对齐的方法

用CSS实现简单的进度条

精品推荐
分类导航