纯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,
                            rgba(255,255,255 ,1) 11px,
                            rgba(255,255,255 ,0) 20px,
                            rgba(255,255,255 ,0) 22px,
                            rgba(255,255,255 ,.3) 35px,
                            rgba(255,255,255 ,.3) 40px,
                            rgba(255,255,255 ,0) 57px,
                            rgba(255,255,255 ,0) 64px,
                            rgba(255,255,255 ,.3) 75px,
                            rgba(255,255,255 ,.3) 77px,
                            rgba(255,255,255 ,.2) 89px,
                            rgba(255,255,255 ,.8) 100px,
                            rgba(255,255,255 ,.8) 103px,
                            rgba(255,255,255 ,.2) 110px,
                            rgba(255,255,255 ,0) 120px,
                            rgba(255,255,255 ,.5) 123px,
                            rgba(255,255,255 ,.5) 129px,
                            rgba(255,255,255 ,.1) 131px,
                            rgba(255,255,255 ,.3) 135px,
                            rgba(255,255,255 ,.5) 138px
                            )
    }

    .head{
      width: 120px;
      height: 100px;
      margin:auto;
      position:relative;
      background: #ccc;
      border-radius:60px 60px 0 0;
      box-shadow:0px -2px 3px 1px rgba(255, 255, 255, .5) inset,
                 10px -4px 8px 2px rgba(50, 50, 50, 0.8) inset,
                 9px -7px 2px 3px rgba(250, 250, 250, 1) inset, 
                 12px -9px 3px 1px rgba(150, 150, 150, .8) inset, 
                 29px -12px 17px 3px rgba(0, 0, 0, .8) inset, 
                 48px -20px 13px -6px rgba(100, 100, 100, 1) inset,

                 -4px 4px 13px -6px rgba(200, 200, 200, 1) inset,
                 -1px -3px 6px 5px rgba(100, 100, 100, 1) inset,
                 -10px -7px 4px 3px rgba(230, 230, 230, 1) inset,
                 -19px -14px 6px 2px rgba(100, 100, 100, 1) inset,
                 -50px -15px 10px -18px rgba(50, 50, 50, 1) inset,
                 -93px -26px 7px -42px rgba(230, 230, 230, 1) inset;
    }

    .head:before{
      content:'';
      position:absolute;
      display:block;
      width: 160px;
      height: 20px;
      left: -20px;
      bottom:9px;
      border-radius:9px;
      z-index: 2;
      background-image: linear-gradient(180deg,#fff 0px,rgba(255,255,255,.3) 3px,transparent 5px),
                        linear-gradient(0deg,#000 0px,rgba(0,0,0,.4) 4px,transparent 5px),
                        linear-gradient(90deg,
                          #ccc 0px,
                          #aaa 10px,
                          #888 16px,
                          #888 17px,
                          #bbb 26px,
                          #bbb 26px,
                          #777 33px,
                          #444 40px,
                          #444 41px,
                          #777 47px,
                          #888 49px,
                          #777 51px,
                          #bbb 90px,
                          #ddd 95px,
                          #ddd 96px,
                          #444 110px,
                          #444 111px,
                          #777 135px,
                          #ccc 144px,
                          #ccc 145px,
                          #444 100%);
      background-size: 100% 5px,100% 5px,100% 100%;
      background-repeat: no-repeat;
      background-position: left top,left bottom;
      box-shadow:0px -0.5px 1px -1px rgba(0, 0, 0, .4);
    }

    .head:after{
      content:�.........完整代码请登录后点击上方下载按钮下载查看