纯css实现理发店转灯动画效果-html代码-BFW代码库

纯css实现理发店转灯动画效果

代码语言：html

所属分类：动画

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


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

<title> CSS  neon light ( pure CSS )</title>
<style>
    body{
    background: #555;
  }
    .hair_light{
      width: 200px;
      height: 500px;
      margin:30px auto;
    }

    .body{
      width: 120px;
      height: 300px;
      background: #aaa;
      margin:auto;
      position:relative;
      background-image: linear-gradient(
                            90deg,hsla(0,0%,0% ,.5) 0%,
                            hsla(0,0%,0% ,.8) 10%,
                            hsla(0,0%,0% ,0) 100%
                            ),
                        linear-gradient(
                            130deg, #fff 30px ,
                            #f00 32px,#f00 60px,
                            #fff 62px,#fff 90px,
                            #3af 92px,#3af 120px,
                            #fff 122px,#fff 150px,
                            #f00 152px,#f00 180px,
                            #fff 182px);
      background-size: 100% 187px;
      background-repeat: repeat-y;
      animation:go 1s infinite linear;
      -webkit-animation:go 1s infinite linear;
      box-shadow: inset 0px 3px 6px hsla(0,0%,0%,.5);
    }

    .body:before{
      content:'';
      position:absolute;
      display:block;
      width: 140px;
      height: 100%;
      top: 0;
      left: -10px;
      opacity:.5;
      background-image:
                        linear-gradient(
                            90deg,rgba(255,255,255 ,.6) 0px,
                            rgba(255,255,255 ,.5) 5px,
                            rgba(255,255,255 ,.1) 8px,
                            rgba(255,255,255 ,.1) 9px,
            .........完整代码请登录后点击上方下载按钮下载查看