div+css实现实现文字排版布局艺术效果代码-html代码-BFW代码库

div+css实现实现文字排版布局艺术效果代码

代码语言：html

代码描述：div+css实现实现文字排版布局艺术效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Squada+One&display=swap");
:root {
  --lcolor: #10fa9f;
  --dcolor: #0cc97f;
}
body {
  background-color: #ff6b8a;
  display: grid;
  place-items: center;
  height: 100vh;
}
.art {
  display: grid;
  width: 450px;
  height: 250px;
  background-color: #10fa9f;
  font-family: 'Squada One';
  overflow: hidden;
  position: relative;
  color: #ff6b8a;
  border-radius: 2px;
  -webkit-text-stroke: 4px #fff;
  box-shadow: -2px 1px 0 2px var(--dcolor), -3px 2px 0 2px var(--dcolor), -4px 3px 0 2px var(--dcolor), -5px 4px 0 2px var(--dcolor), -6px 5px 0 2px var(--dcolor), -7px 6px 0 2px var(--dcolor), -8px 7px 0 2px var(--dcolor), -.........完整代码请登录后点击上方下载按钮下载查看