欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純css實(shí)現(xiàn)立體擺放圖片效果的實(shí)例代碼

  發(fā)布時(shí)間:2018-09-13 08:44:04   作者:佚名   我要評(píng)論
這篇文章主要介紹了純css實(shí)現(xiàn)立體擺放圖片效果的實(shí)例代碼,需要的朋友可以參考下

1.  元素的 width/height/padding/margin 的百分比基準(zhǔn)

設(shè)置 一個(gè)元素 width/height/padding/margin 的百分比的時(shí)候,大家可知道基準(zhǔn)是什么?

舉個(gè)栗子:

.parent {
  width: 200px;
  height: 100px;
}
.child {
  width: 80%;
  height: 80%;
}
.childchild {
  width: 50%;
  height: 50%;<br> padding: 2%;<br>  margin: 5%;<br>
}  

<div class="parent">
    <div class="child">
        <div class="childchild"></div>
    </div>
</div> 

 

  上段代碼中,childchild 元素的 width 是多少? height 是多少?padding 是多少? margin是多少?

元素的 height 百分比基準(zhǔn)是父級(jí)元素的 height, 元素的 width, padding, margin 百分比基準(zhǔn)是父級(jí)元素的 width。

由此,相信大家都已經(jīng)有數(shù)了,大家可以試一下呢~~

面試經(jīng)常會(huì)遇到一個(gè)簡(jiǎn)單的css樣式問(wèn)題 , 實(shí)現(xiàn)一個(gè)自適應(yīng)的正方形,原理就是基于上面的那些知識(shí)了。只需要

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

  因?yàn)樵氐?width 和 padding 的基準(zhǔn)值都是父級(jí)元素的 width, 而 body 的 width 就是瀏覽器窗口啦~~,so 這樣設(shè)置就可以隨著瀏覽器窗口大小變化,正方形自適應(yīng)了呢~~

2. 純css實(shí)現(xiàn)立體擺放圖片效果

言歸正傳,想要實(shí)現(xiàn)如下圖中圖片的立體擺放效果,就需要應(yīng)用一下 padding ,width, height 的知識(shí)了。

有點(diǎn)眼熟,是不是跟小說(shuō)軟件里推薦圖書(shū)的樣式有些相似呢?

這里,首先我們看下其位置擺放,一張圖片水平居中并且靠前,其他兩邊圖片分別左右對(duì)齊,并且靠后一些,呈現(xiàn)一種立體擺放的樣子。這里我學(xué)到了一種完全依賴(lài)css,簡(jiǎn)單的寫(xiě)法即可實(shí)現(xiàn)這種立體的效果。

 · 不同的高度是 padding-top 有大有小撐起來(lái)的。

 · 前后效果是 z-index 折疊順序控制的。

 · 排列上使用了 nth-of-type 偽元素控制 + positon 定位結(jié)合。

是不是有點(diǎn)思路了呢?不繞彎子了,直接上代碼

<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> 

總結(jié)

以上所述是小編給大家介紹的純css實(shí)現(xiàn)立體擺放圖片效果 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論