div+css实现立体网格空间文字显示效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体网格空间文字显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
:root {
--text: #FEEBF7;
--background: rgba(25, 8, 19, 1);
--base-speed: 40s;
--overlay: rgba(25, 8, 19, 0.9);
--color-grid: #ff47a0;
--color-grid-glow: #fa7cb9;
--line-width: 0.0625rem;
--height: 15.625rem;
--perspective: 17.625rem;
}
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
position: relative;
}
h2 {
font-size: 7rem;
font-weight: 900;
opacity: 0.3;
}
.top {
background: inherit;
perspective: var(--perspective);
flex: 0 0 var(--height);
position: relative;
}
.top:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--color-grid) var(--line-width), transparent var(--line-width)), linear-gradient(to bottom, var(--color-grid) var(--line-width), transparent var(--line-width));
background-size: 2rem 125rem, 125rem 2rem;
transform: rotateX(-53deg) scale(1.8) translateZ(43px);
-webkit-animation: grid-top calc(var(--base-speed) * 1) linear infinite;
animation: grid-top calc(var(--base-speed) * 1) linear infinite;
border-bottom: 1px solid var(--color-grid);
filter: drop-shadow(0 0 2px var(--color-grid-glow));
}
.top-overlay {
p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0