偽元素的靈活使用
效果圖
前段時(shí)間SpuerMe國(guó)潮風(fēng)盛行，咱也來(lái)跟個(gè)風(fēng)袄友。
HTML結(jié)構(gòu)
<div class="thing">
<img src="./img/flower-circle.png" alt="" style="height: 100%;width: 100%">
</div>
很簡(jiǎn)單就是一個(gè)div元素用來(lái)存放內(nèi)容殿托，內(nèi)容就是一張圖片，其他的什么都靠CSS撐場(chǎng)子了剧蚣。
CSS結(jié)構(gòu)
css分為兩部分吧 一個(gè)是thing的自己的樣式還有就是他偽元素的樣式支竹。
@font-face{
font-family:'ltx';
src:url('./fonts/ltx.ttf') format('truetype');
}
.thing{
display: block;
height: 30rem;
width: 30rem;
background-color: pink;
box-sizing: border-box;
position: relative;
}
@font-face主要是引入了字體這樣superme會(huì)更好看些
position: relative;設(shè)置了為相對(duì)位置，這樣是為了偽元素可以使用真實(shí)元素進(jìn)行位置定位鸠按，及想要偽元素緊挨著該元素
接下來(lái)來(lái)看偽元素的設(shè)置 比較多我會(huì)一一講解
.thing::after{
color: #fff;
font-size: 3rem;
font-family: "ltx";
text-align: center;
line-height: 30rem;
content: "SuperMe";
display: block;
background-color: #000;
height: 30rem;
width: 30rem;
transform: rotate(90deg);
transform-origin: right bottom;
box-sizing: border-box;
position: absolute;
top: 0%;
left: 0%;
}
text-align: center; 設(shè)置文字水平居中
line-height: 30rem; 設(shè)置與height一樣這樣文字就可以垂直居中
content: "SuperMe";設(shè)置內(nèi)容為SuperMe
position: absolute;top: 0%;left: 0%; 設(shè)置位置樣式為絕對(duì)定位礼搁，因?yàn)檎鎸?shí)元素的定位為relative，所以此處的top: 0%;left: 0%;不是相對(duì)body元素目尖，而是相對(duì)真實(shí)元素馒吴。及與偽元素與真實(shí)元素重疊
transform-origin: right bottom;transform: rotate(90deg);以偽元素的右下角為圓心順時(shí)針旋轉(zhuǎn)90度
.thing:hover::after{
font-size: 3rem;
font-family: "ltx";
text-align: center;
line-height: 30rem;
color: #fff;
content: "SuperMe";
display: block;
background-color: #000;
height: 30rem;
width: 30rem;
opacity: 0.3;
transform: rotate(0deg);
transform-origin: right bottom;
box-sizing: border-box;
position: absolute;
top: 0%;
left: 0%;
}
設(shè)置真實(shí)元素:hover時(shí)偽元素的樣式 與上面的變化就是
opacity: 0.3; 將不透明度變成0.3
transform: rotate(0deg); 旋轉(zhuǎn)角度變?yōu)?度，及偽元素與真實(shí)元素重疊
總結(jié)
本文所有源碼可以點(diǎn)擊鏈接下載
