图像多维展示效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家

在Awwwards上欣赏牛人大作时，看到了一个网站newtonrunning，狠喜欢他的菜单切换效果和球鞋多维展示效果，然后禁不住手痒仿制了一个多维图像展示效果，大家可以欣赏效果，在线研究，下载收藏。

本案例主要知识点

1.css counter计数器的使用

2.自适应设计（百分比实现）

3.CSS3 Transition（过渡）

4.复杂选择器的用法

好的，开工吧，首先看html，我们用ul>li来作导航的菜单项，里面什么都不要，显示图像的那个元素，我们放到和li并列的层次，以便于以后使用兄弟选择符选中。

<ul class="menu">
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<!--图像显示元素，和li放到一块，以便使用兄弟选择符选中-->
	<div class="pic"></div>
</ul>

我们使用了normalize.css来调和浏览器的分歧。

<link rel="stylesheet" type="text/css" href="css/normalize.css"/>

然后我们来进行全局设置，设置页面背景、溢出，列表项和盒子大小模型

/*
 * 全局设置
 * 页面背景、内容溢出设置
 * 列表项、盒子大小设置
 * */
body{
	background: #FCCC46;
	overflow: hidden;
}
li,li::before,li::after{
	list-style-type: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

菜单的设置，我们在这里进行计数器的重置

/*
 * 菜单整体设置
 * 宽、高、透明度
 * 水平垂直居中设置，大家可以参考本博客CSS居中对齐一文
 * 过渡属性设置
 * 计数器重置
 * */
.menu{
	width: 100%;
	height: 30%;
	margin: auto;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;	
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;	
	counter-reset: liCounter;		
}
/*
 * 菜单Hover设置
 * 透明度变化
 * */
.menu:hover{
	opacity: 1;
}

菜单项的设置，我们需要设置菜单项的宽高、背景色、边框、鼠标样式、过渡属性，我们需要指定计数器增加

/*
 * 菜单列表项设置
 * 宽、高设置，这里使用百分比实现自适应
 * 背景色、边框、鼠标样式设置
 * 过渡属性设置
 * 计数器增加
 * */
.menu li{
	float: left;
	width: 16.666%;
	height: 100%;
	border: 1px dashed rgba(255,255,255,.5);
	border-width:0 1px 0 0;
	background-color:rgba(255,255,255,0.05);
	cursor: pointer;
	position: relative;
	counter-increment:liCounter;
	z-index: 2;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
/*
 * 菜单列表项Hover设置
 * 背景色改变
 * */
.menu li:hover{
	background-color:rgba(255,255,255,0.1);
}

提示文本的设置，使用伪对象实现，需要设置宽、高、背景色、边框、透明度、位置设定、过渡属性等，使用计数器呈现提示文本

/*
 * 提示文本(伪对象实现)设置
 * 内容设置，使用计数器
 * 宽、高、背景色、边框、透明度
 * 位置设置
 * 过渡属性设置
 * 文字样式设置
 * */
.menu li::before{
	content:counter(liCounter)'/6';
	width: 100%;
	height: 30px;
	border: 1px solid rgba(0,0,0,.5);
	border-width: 0 1px;
	position: absolute;
	left:0;
	top: 0;
	text-align: center;
	opacity: 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
/*
 * 提示文本hover设置
 * 改变位置、透明度
 * */
.menu li:hover::before{
	top:40%;
	opacity: 1;
}

图片展示元素的设置

/*
 * 图片设置
 * 宽、高设置
 * 位置设置
 * 背景设置
 * */
.menu .pic{
	width:100%;
	height:600px;
	background-position:center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left:0;
	top: 50%;
	margin-top:-300px;
	z-index: 1;
}
/*
 * hover之后图像设置
 * 每个菜单项的hover之后的图像显示效果
 * */
.menu li:nth-child(1):hover~ .pic{
	background-image: url('img/1.jpg');
}
.menu li:nth-child(2):hover~ .pic{
	background-image: url('img/2.jpg');
}
.menu li:nth-child(3):hover~ .pic{
	background-image: url('img/3.jpg');
}
.menu li:nth-child(4):hover~ .pic{
	background-image: url('img/4.jpg');
}
.menu li:nth-child(5):hover~ .pic{
	background-image: url('img/5.jpg');
}
.menu li:nth-child(6):hover~ .pic{
	background-image: url('img/6.jpg');
}

OK，That's all, Thank you.

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------