利用伪元素实现SuperMe国潮风阴影利用伪元素实现SuperMe国潮风阴

伪元素的灵活使用效果图
文章图片
SpuerMe
前段时间SpuerMe国潮风盛行，咱也来跟个风。
HTML结构

文章图片

很简单就是一个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时伪元素的样式与上面的变化就是