刷墙显示效果-html代码-BFW代码库

刷墙显示效果

代码语言：html

所属分类：动画

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

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

<style>
html, body {
    margin: 0;
    padding: 0;
    background: #000;
    height: 100%;
    width: 100%;
  }
#confetti{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  
  
  a.iprodev {
    line-height: normal;
    font-family: Varela Round, sans-serif;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    color: #A7AAAE;
    position: absolute;
    left: 20px;
    bottom: 20px;
    border: 1px solid #A7AAAE;
    padding: 12px 20px 10px;
    border-radius: 50px;
    transition: all .1s ease-in-out;
    text-transform: uppercase;
  }
  a.iprodev:hover {
    background: #A7AAAE;
    color: white;
  }
.container{
    width: 400px;
    height: 400px;
   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.roller{
  height:45px;
  width:400px;
  border: 5px solid #DD92F3;
  border-radius: 10px;
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  top:0px;
  background-image: linear-gradient(to bottom,#57C0EE,#9DDCE1);
  animation: roller 8s infinite;
}
@keyframes roller{
    50%{
        top:300px;
    }
}

.roller:before{
position: absolute;
content: "";
background-color:rgba(255,255,255,0.5);
height: 5px;
width: 5px;
top: 20px;
left:5px;
border-radius: 7px;
}

.roller:after{
    position: absolute;
    content: "";
    height: 90px;
    width: 80px;
    border: 5px solid #DD92F3;
    border-left: none;
    right: -20px;
    top: 20px;
    z-index: -1;
    border-radius: 7px;
}

.handle{

width: 10px;
background-color: #DD92F3;
position: absolute;
top: 70px;
right: 65px;
}

.handle:after{
    position: absolute;
    content: "";
height: 100px;
width: 25px;
background-color:#DD92F3;
bottom: -150px;

right: -8px;
border-radius: 5px;
}

.paint{
    background-image: linear-gradient(to bottom,#57C0EE,#C4DCE6);;
    height: 0px;
    width: 390px;
    position: absolute;
    margin:auto;
    left:0px;
    right: 0px;
    z-index: -1;
    animation: paint 8s infinite;
   
}
 
.paint p{
  font-family: Segoe Script;
    text-align: center;
  font-size: 50px;
    margin-top:100px;
}

@keyframes paint{
    50%{
        height: 300px;
    }
}
</style>

</head>
<body translate="no">
<!DOCTYPE html>
<html>
<head>
<title>Paint roller animation!</title>
<link rel="stylesheet" href="roll.css" type="text/css">

<script>
                </script>
</head>
<body>
<canvas height='1' id='confetti' width='1'>
<a class='iprodev' href='http://iprodev.com' target='_blank'>iprodev.com</a>
</canvas>
<div class="con.........完整代码请登录后点击上方下载按钮下载查看