【CSS】纯css实现立体摆放图片效果

1. 元素的 width/height/padding/margin 的百分比基准

设置一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？

举个栗子：

.parent {width: 200px;height: 100px;
}
.child {width: 80%;height: 80%;
}
.childchild {width: 50%;height: 50%;　padding: 2%;  margin: 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样式问题，实现一个自适应的正方形，原理就是基于上面的那些知识了。只需要

#box {width: 50%;padding-top: 50%;background: #000;}

　　因为元素的 width 和 padding 的基准值都是父级元素的 width，而 body 的 width 就是浏览器窗口啦～～，so 这样设置就可以随着浏览器窗口大小变化，正方形自适应了呢～～

2. 纯css实现立体摆放图片效果

言归正传，想要实现如下图中图片的立体摆放效果，就需要应用一下 padding ，width， height 的知识了。

有点眼熟，是不是跟小说软件里推荐图书的样式有些相似呢？

这里，首先我们看下其位置摆放，一张图片水平居中并且靠前，其他两边图片分别左右对齐，并且靠后一些，呈现一种立体摆放的样子。这里我学到了一种完全依赖css，简单的写法即可实现这种立体的效果。

· 不同的高度是 padding-top 有大有小撑起来的。

· 前后效果是 z-index 折叠顺序控制的。

· 排列上使用了 nth-of-type 伪元素控制 positon 定位结合。

是不是有点思路了呢？不绕弯子了，直接上代码

<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】纯css实现立体摆放图片效果相关推荐

html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
b站图片css,纯CSS打造BiliBili样式博客主题
前言一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...
轮回眼css,纯CSS如何实现血轮眼+轮回眼特效（代码详解）
本篇文章给大家介绍一下使用纯CSS实现血轮眼+轮回眼特效的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助. 效果(完整代码在底部) 其实实现并不难,都是重复的代码比较多. 实现(可 ...
html 文本溢出兼容,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻 ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
window lcd css,纯CSS实现液晶字体效果
使用css实现液晶字体效果 /*The Digits*/.light{width:300px;background:#f4f5f7;height:60px;text-align:center; }.d ...
html三角形下拉列表,CSS—纯CSS实现三角图形（常用于带指引效果的小三角，下拉列表的小三角等）...
常用情况,如下图图片.png 图片.png CSS代码 .we-chat-info::after{ position: absolute; top: 109px; right: -8px; cont ...

【CSS】纯css实现立体摆放图片效果

【CSS】纯css实现立体摆放图片效果相关推荐

最新文章

热门文章