使用before和after屬性選擇器
阿新 • • 發佈：2020-07-13
最近仿造了小米官網寫了一遍，可以說是完全把官網給寫完了。
官網中有一個log切換的動態效果，有點把我卡住了找方法找了許久，然後用一個簡單的方法實現了：
先了解一下before和after兩個屬性選擇器：
before：在元素之前插入內容；
after：在元素之後插入內容；
兩個屬性可以新增圖片型別，可以新增文字，可以新增div塊，所以在網頁的應用範圍很廣。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>css3小米log切換</title> <style> .log{ /* 設定外部盒子高55寬55文字居中。背景顏色為橙色，溢位隱藏，居中 */ text-align: center; cursor: pointer; overflow: hidden; width: 55px; height: 55px; background-color:rgb(255,103,0); margin:40px auto; } /* 在div前插入一個寬為49 高49 top 3 left -49 將home.png移出log盒子， 設定過度時間0.2s，背景圖片為home.png */ .log::before{ width: 49px; height: 49px; content: ""; position: relative; top: 3px; left:-49px; background: url('img/mi-home.png') center; display: inline-block; transition:all .2s ease 0s; } /* 在div前插入一個寬為49 高49 top -49 left 0 將log.png移出log盒子， 設定過度時間0.2s，背景圖片為log.png */ .log::after{ width: 49px; height: 49px; content: ""; position: relative; top: -49px; left: 0; background: url('img/mi-logo.png') center; display: inline-block; transition:all .2s ease 0s; } /* 懸浮對兩張圖片進行偏移，達到切換效果 */ .log:hover::before{ left: 0; } .log:hover::after{ left: 50px; } </style> </head> <body> <div class="log"></div> </body> </html>
在使用這兩個屬性時：content 是必不可少的。
除此之外：在寫這個的過程中我對選擇器有了更深一層的理解：
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 設定div1的樣式 */ .div1 { width: 400px; height: 200px; background-color: lawngreen; } /* 設定div2的樣式 */ .div2 { width: 400px; height: 200px; background-color: lightcoral; } /* 設定div3的樣式 */ .div3{ width: 400px; height: 200px; background-color: olivedrab; } /* 設定div1的子div樣式並隱藏 */ .div1>div{ width: 200px; height: 100px; background-color: rgb(18, 53, 150); display: none; } /* 設定div2的子div樣式並隱藏 */ .div2>div { width: 200px; height: 100px; background-color: rgb(165, 24, 24); display: none; } /* 第一個懸浮父元素修改其子元素div樣式使子div顯現 */ .div1:hover>div{ display: inline-block; } /* 懸浮第一個div1修改其兄弟元素div2的背景顏色*/ .div1:hover + .div2{ background-color: mediumvioletred; } /* 懸浮第一個div1修改其同級的div3的boder */ .div1:hover ~ .div3{ border: 10px solid rgb(138, 46, 46); } /* 將css選擇器一層層巢狀使用就可以實現簡單的動畫效果，也可以新增過度效果就會更加生動， css3的屬性可以實現部分js功能，但不建議這樣使用，複雜的動畫效果使用js將會更加方便快捷 */ </style> </head> <body> <div class="div1"> 我是第一個div1 <div> 我是第一個div1的子div </div> </div> <div class="div2"> 我是第二個div2 <div> 我是第二個div2的子div </div> </div> <div class="div3"> 我是第三個div3 <div> 我是第三個div3的子div </div> </div> </body> </html>
使用的圖片
敲完此次案例對於程式碼的理解和熟練程度更加的清晰
個人學習，內容簡略