css滚筒刷

下载代码

html

css

分享到微信朋友圈

html

css

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-bottom-right-radius: 15%;
}
.top:before {
  position: absolute;
  content: '';
  background-color: #000;
  width: 33px;
  
  height: 151px;
  border-radius: 5px;
  left: -19px;
  top: -96px;
}
.top:after {
  content: '';
  position: absolute;
  height: 132px;
  width: 64px;
  
  background-color: #fcc5c7;
  border-radius: 10%;
  top: -92px;
  left: -36px;
  border: 5px solid #fdacc7;
}
.handle {
  position: absolute;
  width: 150px;
 
  height: 40px;
  border-top: 7px solid #000;
  border-left: 7px solid #000;
  border-top-left-radius: 30px;
  top: 70px;
  left: 98px;
}
.handle:before {
  position: absolute;
  content: '';
  width: 230px;
  
  height: 45px;
  background-color:sandybrown ;
  border: 5px solid #a6593b;
  left: 50px;
  top: -31px;
  border-radius: 8%;
}
.handle:after {
  position: absolute;
  content: '';
  width: 50px;
  height: 43px;
  background-color: sandybrown;
  transform:rotate(180deg);
  border: 3px solid #a6593b;
  left: 90px;
  top: -27px;
  border-radius: 50%;
}
@keyframes paint {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes roller {
  0% { left: 0px; }
  100% { left: 100%; }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg