利用僞元素實現SuperMe國潮風陰影

僞元素的靈活使用

效果圖

前段時間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度，及僞元素與真實元素重疊

總結

本文所有源碼可以點擊鏈接下載