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);
  }
}
</style>


</head>

<body  >
  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1080">
<g id="background">
	<circle fill="#FF0065" cx="1102.68" cy="230.8" r="111.16"/>
	<circle fill="#FF0065" cx="968.82" cy="681.71" r="68.07"/>
	<circle fill="#FF0065" cx="916.13" cy="136.83" r="41.38"/>.........完整代码请登录后点击上方下载按钮下载查看