纯css布局实现刷墙文字显示效果-html代码-BFW代码库

纯css布局实现刷墙文字显示效果

代码语言：html

所属分类：动画

代码描述：纯css布局实现刷墙文字显示效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #FCDFF3;
  
  overflow: hidden;
}
.load {
  position: absolute;
  width: 50vw;
  height: 156px;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 20%;
  transform:rotate(5deg);
}
.paint {
  position: absolute;
  height: 155px;
  width: calc(100% - 349px);
  overflow: hidden;
  
  animation: paint 10s linear infinite alternate;
}
.stroke, .stroke:before, .stroke:after {
  position: absolute;
  height: 20px;
  width: 1000px;
  border-radius: 5px;
  background-color:#fcc5c7 ;
  z-index: 1;
  
}
.stroke {
  top: 17px;
  box-shadow: 10px 20px #fcc5c7;
  
}

.stroke:before {
  content: '';
  top: 40px;
  left: 5px;
  box-shadow: 5px 20px #fcc5c7 ;
  
}

.stroke:after {
  content: '';
  top: 80px;
  left: 5px;
  box-shadow: -5px 20px #fcc5c7;
  
}
h1 {
  position: absolute;
  top: 40px;
  left: 175px;
  z-index: 2;
  font-size:30px;
  font-space:2px;
  font-family: "Lucida Console", Monaco, monospace;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.roller {
  position: absolute;
  width: 363px;
  height: 163px;
  
  animation: roller 10s linear infinite alternate;
  z-index: 3;
}
.top {
  position: absolute;
  height: 60px;
  width: 60px;
  
  border-left: 7px solid #000;
  border-bottom: 7px solid #000;
  border-right: 7px solid #000;
  top: 96px;
  left: 31px;
  border-bottom-left-radius: 15%;
  border-botto.........完整代码请登录后点击上方下载按钮下载查看