javascript - 页面如何呈现书架效果?
本文介绍了javascript - 页面如何呈现书架效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如图:
如何做出书架的效果,刚入行,这个效果想了半天,没有思路,求大神指点~~~
解决方案
既然想要CSS3实现,那我就做一下吧
都是运用CSS3 3D变换的知识,设置perspective,rotate3D,translateXY等属性就好了,需要花点时间慢慢调整
效果预览:
代码可以做参考下,按照自己的需求优化和修改
<style>
ul{
list-style:none;
}
.stage{
position:relative;
margin:100px;
}
.desk{
background:#eae1dc;
width:500px;
height:20px;
position:absolute;
bottom:-35px;
border-bottom:2px solid #f5ebe9;
z-index:-1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.desk:after{
content: "";
background: #F2EDEA;
width: 574px;
position: absolute;
height: 65px;
-webkit-transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px);
transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px);
}
.desk-shadow{
position: absolute;
bottom: -100px;
z-index: -2;
background: none;
width: 510px;
height: 65px;
box-shadow: 0 56px 63px rgba(0,0,0,0.3);
-webkit-transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px);
transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px);
}
.books-list li{
position:relative;
display:inline-block;
margin-left:12px;
width:130px;
height:134px;
z-index:2;
overflow-y:hidden;
overflow-x:visible;
}
.books-list li img{
width:100px;
height:134px;
}
.books-list li:after{
content: "";
position: absolute;
overflow: hidden;
right: 28px;
bottom: 0px;
width: 25px;
height: 129px;
background: rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px);
transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px);
z-index: -1;
}
</style>
<body>
<div class="stage">
<ul class="books-list">
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
</ul>
<div class="desk"></div>
<div class="desk-shadow"></div>
</div>
</body>
Demo:http://runjs.cn/code/cjmxmfyu
这篇关于javascript - 页面如何呈现书架效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文