纯css实现立体摆放图片效果的示例代码
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
1.元素的 width/height/padding/margin 的百分比基准
设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么?
举个栗子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .parent { width : 200px ; height : 100px ; } .child { width : 80% ; height : 80% ; } .childchild { width : 50% ; height : 50% ; padding : 2% ; margin : 5% ; } |
1 2 3 4 5 | < div class = "parent" > < div class = "child" > < div class = "childchild" ></ div > </ div > </ div > |
上段代码中,childchild 元素的 width 是多少? height 是多少?padding 是多少? margin是多少?
元素的 height 百分比基准是父级元素的 height, 元素的 width, padding, margin 百分比基准是父级元素的 width。
由此,相信大家都已经有数了,大家可以试一下呢~~
面试经常会遇到一个简单的css样式问题 , 实现一个自适应的正方形,原理就是基于上面的那些知识了。只需要
因为元素的 width 和 padding 的基准值都是父级元素的 width, 而 body 的 width 就是浏览器窗口啦~~,so 这样设置就可以随着浏览器窗口大小变化,正方形自适应了呢~~
2. 纯css实现立体摆放图片效果
言归正传,想要实现如下图中图片的立体摆放效果,就需要应用一下 padding ,width, height 的知识了。
有点眼熟,是不是跟小说软件里推荐图书的样式有些相似呢?
这里,首先我们看下其位置摆放,一张图片水平居中并且靠前,其他两边图片分别左右对齐,并且靠后一些,呈现一种立体摆放的样子。这里我学到了一种完全依赖css,简单的写法即可实现这种立体的效果。
·不同的高度是 padding-top 有大有小撑起来的。 · 前后效果是 z-index 折叠顺序控制的。 · 排列上使用了 nth-of-type 伪元素控制 + positon 定位结合。
是不是有点思路了呢?不绕弯子了,直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | < html > < head > < style > * { margin: 0; padding: 0; } .box { width: 300px; height: 200px; position: relative; } .img { width: auto; height: 0; } .box img { width: 100%; display: inline-block; } .box .img:nth-of-type(1) { display: inline-block; position: absolute; left: 50%; top: 50%; padding-bottom: 50%; transform: translate(-50%, -50%); z-index: 6; } .box .img:nth-of-type(2), .box .img:nth-of-type(3) { position: absolute; top: 50%; transform: translateY(-50%); padding-bottom: 63%; z-index: 3; } .box .img:nth-of-type(2) { right: 0; } .box .img:nth-of-type(3) { left: 0; } </ style > </ head > < body > < div class = "box" > < div class = "img" > < img src = "https://febaidu.com/list/img/3ns.png" /> </ div > < div class = "img" > < img src = "https://febaidu.com/list/img/3ns.png" /> </ div > < div class = "img" > < img src = "https://febaidu.com/list/img/3ns.png" /> </ div > </ div > </ body > </ html > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了纯css实现立体摆放图片效果的实例代码,需要的朋友可以参考下2018-09-13
- 这篇文章主要介绍了使用CSS制作立体导航栏的相关资料,需要的朋友可以参考下2017-10-16
- 本篇文章主要介绍了纯CSS实现3D按钮效果实例代码,css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值。有兴趣的可以了解一下。2016-12-20
- 这篇文章主要给大家介绍了CSS3利用三维变形实现立体方块的方法,文中给出了完整的实例代码,感兴趣的朋友们可以自己运行后看看效果,只有自己动手了才能更好的学习,下面来2016-12-15
- 本篇文章主要介绍了使用CSS3实现一个3D相册效果,小编觉得不错。这里整理了详细的代码,有需要的小伙伴可以参考下。2016-12-03
- 这篇文章主要介绍了基于CSS3制作立体效果导航菜单的相关资料,需要的朋友可以参考下2016-01-12
- 这篇文章主要为大家介绍了CSS实现有立体感的横向按钮式菜单效果代码,可实现鼠标滑过呈现按钮按下的效果,具有极强的3D立体效果,涉及css基于hover属性的border边框设置技巧,2015-09-15
- 这篇文章主要介绍了css3实现超立体3D图片侧翻倾斜效果,需要的朋友可以参考下2014-04-16
- 使表格变为立体的,想用css规定表格形式,应该如何写才能实现这个效果呢,本文将介绍一种很好的方法,需要的朋友可以参考下2012-12-10
- CSS功能强大.有时候不需要图片.就代码就能实现特殊效果了.2012-06-04
最新评论