僞元素的靈活使用
效果圖
前段時間SpuerMe國潮風盛行,咱也來跟個風。
HTML結構
<div class="thing">
<img src="./img/flower-circle.png" alt="" style="height: 100%;width: 100%">
</div>
很簡單就是一個div元素用來存放內容,內容就是一張圖片,其他的什麼都靠CSS撐場子了。
CSS結構
css分爲兩部分吧 一個是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會更好看些
position: relative;
設置了爲相對位置,這樣是爲了僞元素可以使用真實元素進行位置定位,及想要僞元素緊挨着該元素
接下來來看僞元素的設置 比較多我會一一講解
.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;
設置文字水平居中
line-height: 30rem;
設置與height
一樣這樣文字就可以垂直居中
content: "SuperMe";
設置內容爲SuperMe
position: absolute;top: 0%;left: 0%;
設置位置樣式爲絕對定位,因爲真實元素的定位爲relative
,所以此處的top: 0%;left: 0%;
不是相對body元素,而是相對真實元素。及與僞元素與真實元素重疊
transform-origin: right bottom;transform: rotate(90deg);
以僞元素的右下角爲圓心順時針旋轉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%;
}
設置真實元素:hover
時僞元素的樣式 與上面的變化就是
opacity: 0.3;
將不透明度變成0.3
transform: rotate(0deg);
旋轉角度變爲0度,及僞元素與真實元素重疊
總結
本文所有源碼可以點擊鏈接下載