滑动门是一种常见的导航菜单样式,使用CSS可以很容易地实现。下面是一个基本的滑动门样式:
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
float: left;
}
ul li a {
display: block;
padding: 10px 20px;
background-color: #ccc;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
ul li a:hover {
background-color: #666;
}
ul li.current a {
background-color: #666;
}
其中,关键的样式是使用了一个.current类来标识当前选中的菜单项,然后使用相应的样式来改变菜单项的背景颜色。
图片翻页效果可以让网站更具交互性和视觉效果。下面是一个简单的图片翻页效果:
<div class="container">
<img src="image1.jpg" class="current">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
.container {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
}
img.current {
opacity: 1;
}
其中,关键的样式是使用了CSS3的transition属性来实现图片的渐变效果。