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 { perspective: var(--perspective); flex: 0 0 var(--height); position: absolute; z-index: 10000; right: 0; left: 0; top: 0; height: var(--height); background: radial-gradient(ellipse at center, transparent 50%, var(--overlay) 70%); } .bottom-overlay { perspective: var(--perspective); flex: 0 0 var(--height); position: absolute; z-index: 10000; right: 0; left: 0; bottom: 0; height: var(--height); background: radial-gradient(ellipse at center, transparent 50%, var(--overlay) 70%); } .bottom { background: inherit; perspective: var(--perspective); flex: 0 0 var(--height); position: relative; } .bottom:before { content: ""; position: absolute; inset: 0; background: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0