純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)文章
CSS3實(shí)現(xiàn)的3D立體文字時(shí)鐘效果源碼
這是一款基于CSS3實(shí)現(xiàn)的3D立體文字時(shí)鐘效果源碼,可實(shí)現(xiàn)實(shí)時(shí)讀取并顯示本機(jī)時(shí)間的功能,界面呈現(xiàn)出逼真的3D立體效果2016-02-29- 這篇文章主要介紹了基于CSS3制作立體效果導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下2016-01-12
CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)立體翻轉(zhuǎn)切換特效源碼
是一款基于jQuery+CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)封面和詳情3D翻轉(zhuǎn)切換特效,本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用,有興趣的朋友們可以前來(lái)下載使用2015-12-07CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)呈現(xiàn)按鈕按下的效果,具有極強(qiáng)的3D立體效果,涉及css基于hover屬性的border邊框設(shè)置技巧,2015-09-15一款純css3實(shí)現(xiàn)的3D立體翻轉(zhuǎn)導(dǎo)航特效源碼
一款純css3實(shí)現(xiàn)的3D立體翻轉(zhuǎn)導(dǎo)航特效源碼是當(dāng)鼠標(biāo)懸停在導(dǎo)航上,會(huì)有一個(gè)立體式翻轉(zhuǎn)效果,效果很逼真2015-02-05基于HTML5+CSS3實(shí)現(xiàn)鼠標(biāo)懸停3D立體式圖片效果源碼
強(qiáng)大的css3功能,不得不再次膜拜 默認(rèn)圖片是作為背景圖片平鋪div中,同時(shí)div保持一個(gè)默認(rèn)的立體姿態(tài)當(dāng)鼠標(biāo)懸停觸發(fā)hover事件后,改變div的另一個(gè)狀態(tài)這樣就實(shí)現(xiàn)了一個(gè)動(dòng)畫(huà)2015-01-23html5+css3實(shí)現(xiàn)的會(huì)翻動(dòng)的3D立體圖書(shū)效果源碼
是一段實(shí)現(xiàn)了會(huì)翻動(dòng)的3D立體圖書(shū)效果的代碼,就目前示例排版來(lái)說(shuō),非常適合官方網(wǎng)站使用,因?yàn)榭雌饋?lái)比較松散,占用面積比較大,當(dāng)然,改一下就可以適應(yīng)于所有網(wǎng)頁(yè)使用了,2014-12-09