图像多维展示效果

悠悠 2022-08-26 13:28 175阅读 0赞

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

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

![SouthEast][]

本案例主要知识点

1.css counter计数器的使用

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

3.CSS3 Transition（过渡）

4.复杂选择器的用法

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

我们使用了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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Awwwards]: http://www.awwwards.com/
[newtonrunning]: http://runbetter.newtonrunning.com/
[Link 1]: http://runbetter.newtonrunning.com/menu
[Link 2]: http://runbetter.newtonrunning.com/products/distance-iii-s
[Link 3]: http://gx.zptc.cn/whqet/imgList/index.html
[Link 4]: http://codepen.io/whqet/pen/yBqtK
[Link 5]: http://pan.baidu.com/s/1sjLKdNf
[SouthEast]: /images/20220824/031260cbc2124ce29a223bf591d40b94.png
[whqet]: http://blog.csdn.net/whqet