<!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>
参考：http://www.codefans.net/jscss/code/3666.shtml?jdfwkey=zivip2
相关推荐
HTML5的transition属性是CSS3中的一个核心特性，它允许元素在不同的状态之间平滑地过渡，而不是立即改变。这个属性极大地增强了网页的交互性和视觉吸引力。本文将深入讲解transition属性的定义、用法以及一些关键...
本“HTML5和CSS3实例教程”将通过一系列实践案例，教你如何结合使用这些特性，创建功能强大、视觉效果出众的网页。PDF电子版提供了详细的理论讲解，源代码则可以直接运行查看效果，帮助你从实践中学习，提升技能。...
在本实例中，我们将探讨如何利用HTML5和CSS3实现一个创新的文字溶合切换效果，结合自定义动画、CSS以及JavaScript，以创造出引人入目的动态效果。 首先，HTML5中的`<div>`标签可以用来创建容器，每个容器用于展示...
这个《HTML5和CSS3实例教程》的源代码集合为学习者提供了丰富的实践材料，帮助理解并掌握这两种语言的实际应用。 HTML5是超文本标记语言的第五个版本，它的主要改进包括： 1. **新元素的引入**：如`<header>`、`...
在"HTML5与CSS3实例教程 第二版"中，源代码涵盖了这些技术的应用，通过实际操作，学习者可以深入理解HTML5和CSS3的新特性，并掌握如何在实际项目中运用它们。代码文件（code）包含了这些实例的完整代码，供学习者...
HTML5和CSS3是现代网页制作的核心技术，其中`transition-timing-function`和`transition-delay`属性对于创建平滑的动态效果至关重要。这两个属性都与CSS3的过渡（transition）功能有关，允许开发者精确控制元素从一...
总之，"css3 transition图文动画显示特效.zip"提供了一个实例，展示了如何利用CSS3 Transition和JavaScript来增强网页的动态效果。通过合理运用这些技术，开发者可以创建出引人入胜且具有高度交互性的网页元素，提高...
2. **边框和背景**：CSS3允许我们设置圆角边框、多色边框以及渐变背景，这在制作菜单时能提供美观的效果。例如，可以为每个菜单项添加圆角和渐变背景，以增加视觉吸引力。 3. **过渡（Transition）**：当元素的状态...
在本实例中，CSS3的transform属性被用于实现3D立方体的旋转效果，通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有： 1. `perspective`：定义观察者与3D...
2. **Flexbox布局**：CSS3中的Flexbox布局模型（Flexible Box）非常适合构建Tab组件。通过设置`display: flex`，我们可以轻松地调整子元素的排列方式，实现水平对齐或垂直对齐。`justify-content`和`align-items`...
在本文中，我们将深入探讨如何使用CSS3的`transition`属性来创建动态的鼠标悬停效果，特别是针对图片标题的应用。CSS3的`transition`属性是实现平滑过渡的关键工具，它允许元素在两种状态之间平滑地变化，而不是立即...
CSS3的过渡（Transition）是另一个关键工具，可以平滑地改变一个元素的样式属性。例如，我们可以为弹出框的出现添加一个淡入效果，通过指定`transition: opacity .2s ease-in-out;`，让弹出框在0.2秒内渐显。此外，...
* CSS3前缀和rem：CSS3新特性、rem单位 * CSS3文本效果：文本阴影、文本描边、文本装饰 * CSS3边框图片效果：border-image、border-radius * CSS3变形效果：transform、transition * CSS3过渡效果：transition、...
CSS3 过渡效果：使用 transition 属性平滑地过渡翻转动画，增强视觉效果。 伪元素：通过 ::before 和 ::after 伪元素扩展卡片的视觉效果，模拟出更真实的 3D 效果。 视差效果：结合背景和卡片的相对移动，创造出深度...
本案例中的“CSS3鼠标hover图文切换特效”就是一个很好的例子，它允许用户在悬停时实现图片与文字的平滑过渡，提升用户体验。 首先，我们来理解这个特效的基本原理。默认情况下，页面上会展示一张图片，当用户的...
在CSS3中，`transition`属性系列是一个重要的创新，它允许我们为元素的样式变化添加平滑的过渡效果，而`transition-duration`则是这个系列中的关键属性之一。 `transition-duration`属性用于指定元素在进行样式变化...
2. `transition`属性：CSS3的过渡效果使得元素从一种样式平稳地过渡到另一种样式。在这里，它用于在点击导航按钮或箭头时，平滑地改变轮播项的位置和透明度。 3. `transform`属性：允许元素进行2D或3D转换，如旋转...
**CSS3基础知识教程：Transition属性与过渡动画效果详解** 在网页设计中，CSS3的引入为开发者提供了更多增强用户体验的工具。Transition（过渡）属性是其中的一个重要特性，它允许元素从一种样式平滑地过渡到另一种...
- **过渡动画**：可以添加CSS3的过渡效果，如`transition`，让内容切换更平滑。 - **响应式设计**：确保标签切换在不同屏幕尺寸下也能正常工作，可能需要使用媒体查询(`@media`)来调整布局。 通过以上步骤，我们...
综上所述，这个项目很可能是一个关于如何使用CSS3实现各种切换效果的实例或者教学资源，涵盖了从基本的伪类选择器到高级的动画技术，结合了jQuery库和UI组件来增强交互性。通过分析和学习这些文件，我们可以深入了解...