前言

写了这么多天游戏了，最近也想换换口味写一点有趣的CSS动效，这次我为大家带来的就是一个纯css的动态效果，层次感遮罩。在现在审美疲劳的大时代环境背景下，对页面的设计也开始越来越追求他的层次感和立体感，有时候因为一个好的板块动效，可以拉高整体的页面颜值增添出页面的高级感，让网页用户有一种油然而生的成为这个页面用户是一种非常自豪事情的感觉。（当然如果甲方觉得麻垮你说的再牛B也是白搭）

那么接下来我们马上开始今天的代码解析

实现步骤

创建出基本元素

不难看出页面元素其实就是一个边框加一段文字，但这个边框并非一个div加上border属性这么简单，这里我用的是伪元素

先写好html标签，这里用阿a标签什么的都可以。

<a href="#">荆棘鸟QAQ</a>

用css把整个页面变成灰色的，并且为了突出文字，把a标签居中，文字变为白色，再加上一个文字阴影。

body {
font-family: "黑体";
background-color: #555;

}

a {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31;
font-size: 80px;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

}

添加伪类

这个就是重头戏了，因为层次效果全靠after和before这两个伪类表现出来。

减少冗余代码，所以先把两个伪类的共同样式写出来。伪类的高读要根据文字大小进行改变，所以直接用padding配合em来规定伪类的高度。宽度直接用100%

a:before,
a:after {
content: '';
padding: .9em .4em;
position: absolute;
left: 50%;
width: 100%;
top: 50%;
display: block;
border: 15px solid skyblue;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out tipsy;

}

边框有了，现在就需要把动态效果给加上，让它先动起来

@keyframes tipsy {
0%{
transform: translateX(-50%) translateY(-50%) rotate(0deg);

    }
100% {
transform: translateX(-50%) translateY(-50%) rotate(360deg);

    }

}

a:before {
z-index: -1;

}

当然层级改变了，但上一层的边框会把下一层的边框给覆盖住，所以还得让部分边框变得透明

a:before {
border-color: skyblue skyblue rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
z-index: -1;

}

a:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) skyblue skyblue;

}

现在就可以看到已经有层次感啦，但是还可以加上一点边框阴影让他更加立体

a:before {
border-color: skyblue skyblue rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
z-index: -1;

}

a:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) skyblue skyblue;
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);

}

在线代码

往期精彩

关于我写了一个海底掘金挑战游戏juejin.cn/post/714464…

关于我随手写了个掘金相关的游戏juejin.cn/post/714232…

关于我帮领导的孩子写了一个小游戏参赛这种事juejin.cn/post/714115…

关于我抽不到月饼礼盒于是用代码做了一个（纯代码文本） juejin.cn/post/714047…

关于我仿做了个steam很火的《Helltaker》游戏juejin.cn/post/712149…