这是一个笔记博客

分类标签

当前:首页 > 纯CSS3实现幽灵漂浮动画

纯CSS3实现幽灵漂浮动画

2018-10-25 15:59    浏览量:0    作者
  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>纯CSS3实现幽灵漂浮动画DEMO演示</title>
  <style>
  *{padding:0;margin:0;}
  body{
  position:relative;
  background:#90C0F1;
  }
  .ghost{
  width:160px;
  margin:100px auto;
  position:relative;
  animation:ghostUpdown 1s infinite alternate;
  -webkit-animation:ghostUpdown 1s infinite alternate;
  }
  .ghostBody{
  width:140px;
  height:180px;
  background:#fff;
  border-radius:100% 100% 0 0;
  position:relative;
  }
  .ghostEye{
  width:15px;
  height:20px;
  border-radius:100%;
  border:2px solid #061E74;
  background:#061E74;
  box-shadow:inset -2px -2px #fff;
  position:absolute;
  top:60px;
  }
  .left{left:45px}
  .right{right:50px;}
  .ghostMouth{
  width:15px;
  height:20px;
  border-radius:100%;
  border:2px solid #061E74;
  position:absolute;
  top:90px;
  left:70px;
  }
  .ghostWave{
  position:absolute;
  width: 140px;
  height: 20px;
  background-size:25px 20px;
  background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);
  }
  .shadow{
  width:140px;
  height:10px;
  border-radius:100%;
  background:#061E74;
  opacity:0.3;
  margin-top:70px;
  animation:shadow 1s infinite alternate;
  -webkit-animation:shadow 1s infinite alternate;
  }
  @keyframes ghostUpdown{
  from{margin-top:100px;}
  to{margin-top:70px;}
  }
  @-webkit-keyframes ghostUpdown{
  from{margin-top:100px;}
  to{margin-top:70px;}
  }
  @keyframes shadow{
  from{margin-top:70px;opacity:0.3;}
  to{margin-top:100px;opacity:0.1;}
  }
  @-webkit-keyframes shadow{
  from{margin-top:70px;opacity:0.3;}
  to{margin-top:100px;opacity:0.1;}
  }
  </style>
  </head>
  <body>
  <div class="ghost">
  <div class="ghostBody"></div>
  <div class="ghostEye left"></div>
  <div class="ghostEye right"></div>
  <div class="ghostMouth"></div>
  <div class="ghostWave"></div>
  <div class="shadow"></div>
  </div>
   
  <div style="text-align:center;clear:both">
  <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  <script src="/follow.js" type="text/javascript"></script>
  </div>
  </body>
  </html>
   

推荐阅读