CSS3.0实例教程:使用transition制作动感十足的图文切换
CSS3.0实例教程:使用transition制作动感十足的图文切换,相信大家应该对css3应该也有了一些了解,我这里就不在重复介绍CSS的各个属性了,今天的这个效果我用了CSS3的transition属性,闲话少说,下面直接看代码。
CSS3.0实例教程:使用transition制作动感十足的图文切换,相信大家应该对css3应该也有了一些了解,我这里就不在重复介绍CSS的各个属性了,今天的这个效果我用了CSS3的transition属性,闲话少说,下面直接看代码。
答案:<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3.0实例教程:使用transition制作动感十足的图文切换</title>
<style type="text/css">
#menu{
width:960px;
margin:100px auto;
}
#menu li{
float:left;
width:200px;
height:288px;
margin-left:10px;
position:relative;
overflow:hidden;
}
#menu li div{
position:absolute;
width:180px;
height:268px;
padding:10px;
text-align:center;
background: rgba(0,0,0, 1);
opacity: 0;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}
#menu li:hover div{
background: rgba(0,0,0, 0.5);
opacity: 1;
color:#ccc;
}
#menu li:first-child div,#menu li:nth-child(3) div{
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
#menu li:first-child div{
left:0;
top:288px;
}
#menu li:first-child:hover div,#menu li:nth-child(3):hover div{
top:0;
}
#menu li:nth-child(2) div,#menu li:last-child div{
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
#menu li:nth-child(2) div{
left:-200px;
top:0;
}
#menu li:nth-child(2):hover div,#menu li:last-child:hover div{
left:0;
}
#menu li:nth-child(3) div{
left:0;
top:-288px;
}
#menu li:last-child div{
left:200px;
top:0;
}
#menu h1{
font-size:16px;
padding-top:60px;
font-weight:bold;
}
#menu p{
text-align:left;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
<div>
<h1>站长资源库</h1>
<p>站长资源库提供编程源码、网站源码、书籍教程、网站模板、网页特效代码等。</p>
</div>
</li>
<li>
<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
<div>
<h1>站长资源库</h1>
<p>站长资源库提供网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>
</div>
</li>
<li>
<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
<div>
<h1>站长资源库</h1>
<p>站长资源库提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>
</div>
</li>
<li>
<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
<div>
<h1>站长资源库</h1>
<p>集中营,专注HTML5、Css3、WEB3.0标准,致力于前端开发资讯的专业博客</p>
</div>
</li>
</ul>
</div>
</body>
</html>
上一个:CSS3做的幻灯片特效
下一个:CSS3 圆形遮罩效果