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"/>
	<circle fill="#FF0065" cx="833.54" cy="497.07" r="186.93"/>
</g>
<g id="skull">
	<g>
		<path opacity="0.75" fill="#FFF6E6" d="M901.5,553.66c-1.05,0.02-2.02-0.55-2.53-1.47c-3.26-5.89-7.52-12.22-15.54-12.44
			l-0.38-0.01c-8.11,0-12.63,6.33-16.22,11.67c-0.91,0.44-1.64,0.8-2.56,1.24l-13.13-0.99c-0.95-0.07-1.8-0.63-2.26-1.46
			c-3.34-6.03-7.63-11.8-14.63-12.77l-0.88-0.12l-1.03-0.01c-6.33,0-10.39,3.78-13.25,8c-0.68,1.01-1.98,1.42-3.14,1.07
			c-0.94-0.28-1.74-0.54-2.43-0.78c-1.18-0.41-1.94-1.54-1.89-2.79c0.04-1.02,0.1-2.06,0.14-2.99c0.45-9.25,0.68-16.2-0.56-21.34
			c-1.17-4.88-3.53-9.31-6.81-12.83c-18.13-19.37-30.57-53.75-33.26-91.97c-2.28-32.28,1.16-82.47,30.45-138.2
			c10.89-20.71,91.29-60.51,172.67-60.51c46.02,0,107.42,13.21,138.59,76.15c25.64,51.76,34.26,99.77,24.94,138.82
			c-7.75,32.46-25.55,49.87-34.85,55.03c-19.18,10.66-23.91,28.94-27.36,42.3c-0.01,0.02-0.01,0.04-0.02,0.06
			c-0.65,2.5-4.02,2.9-5.23,0.62c-1.02-1.93-2.04-4.25-2.93-6.99c-7.86-23.99-23.83-37.19-44.98-37.19l-1.02,0.01
			c-38.41,0.78-46.36,23.86-52.17,40.72c-3.99,11.59-6.9,18.99-15.25,23.62c-0.17,0.1-0.35,0.18-0.54,0.24
			c-0.86,0.29-3.29,1.01-8.85,2.09c-1.1,0.21-2.24-0.22-2.86-1.15c-2.72-4.04-7.21-8.82-14.2-8.82h-0.45l-0.53,0.03
			c-7.36,0.52-11.33,6.35-13.96,11.51c-0.47,0.92-1.42,1.49-2.45,1.5L901.5,553.66z"/>
		<path fill="#FFF6E6" d="M1128.31,289.39c-73.98-149.37-310.29-61.16-334.07-15.91c-53.19,101.18-33.45,204.01,4.8,244.88
			c1.85,1.98,3.08,4.43,3.71,7.06c1.59,6.64-0.78,24.96,0.17,28.62c1.1,4.27,6.7,7.05,19.9,10.34c4.22,1.05,6.15,0.81,7.58-1.99
			c1.8-3.52,4.16-8.59,6.07-8.32c1.79,0.25,4.52,4.89,6.47,8.7c1.59,3.09,4.65,5.13,8.12,5.39l19.52,1.46
			c3.48,0.26,6.82-1.32,8.85-4.15c2.47-3.45,5.65-9.01,7.63-8.95c1.75,0.05,4.43,5.38,6.31,8.84c1.76,3.24,5.2,5.21,8.89,5.14
			l15.56-0.27c3.79-0.07,7.22-2.27,8.83-5.71c1.61-3.43,3.62-7.19,4.76-7.27c1.59-0.11,3.6.........完整代码请登录后点击上方下载按钮下载查看