利用伪元素实现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度，及伪元素与真实元素重叠

总结

本文所有源码可以点击链接下载