svg实现骷颅鬼魂动画效果代码-html代码-BFW代码库

svg实现骷颅鬼魂动画效果代码

代码语言：html

代码描述：svg实现骷颅鬼魂动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body, html {
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b1f47;
  }
svg {
    height: 50vh;
    max-height: 100vh;
  }

#skull{
  animation-name: bobbin;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center;
  transform-box: fill-box;
}

#ghost1, #ghost2, #ghost3{
  animation-name: opacity;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center;
  transform-box: fill-box;
}

#ghost2 {
  animation-delay: 0.25s;
}
#ghost3 {
  animation-delay: 0.5s;
}

@keyframes bobbin{
  0%, 100%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(10px);
  }
}

@keyframes opacity{
  
  0%, 75%{
    opacity:0;
    transform:translateY(15px);
  }
  90%, 100%{
    opacity:1;
    transform:translateY(-15px);
  }
}
<.........完整代码请登录后点击上方下载按钮下载查看