纯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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0