svg实现一个牛年牛首动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg实现一个牛年牛首动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
<style>
body, html {
  height: 100%;
  margin: 0;
}
svg {
  max-height: 100%;
}

	#all-zodiac{
	 transform-origin: 1000px 1000px;
	 animation-name: zodiac-rotate;
	 animation-timing-function: ease-in-out;
	 animation-duration: 10s;
	 animation-iteration-count: infinite;
	}

	#ox_1_{
		transform-origin: 1000.2619px 257.5px;
		animation-name: zodiac-counter-rotate-ox;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#tiger{
		transform-origin: 1371.5119px 357.5px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#rabbit{
		transform-origin: 1643.2858px 628.75px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#dragon{
		transform-origin: 1742.7619px 1000px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#snake{
		transform-origin: 1643.2858px 1371.25px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#horse{
		transform-origin: 1371.5119px 1643.0239px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#goat{
		transform-origin: 1000.2619px 1742.5px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#monkey{
		transform-origin: 629.0119px 1642.5px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#rooster{
		transform-origin: 357.2381px 1371.25px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#dog{
		transform-origin: 257.2381px 1000px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#pig{
		transform-origin: 357.2381px 628.75px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#rat{
		transform-origin: 629.0119px 356.9761px;
		animation-name: zodiac-counter-rotate;
		animation-timing-function: ease-in-out;
	 animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#body-group{
	 transform-origin: 1007.65px 1200.679px;
	 animation-name: body-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#face-group{
	 transform-origin: 1009.22px 945.729px;
	 animation-name: face-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#hair01{
	 transform-origin: 999.344px 626.41px;
	 animation-name: hair-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#right-eye-group{
	 transform-origin: 1141.889px 835.781px;
	 animation-name: right-eye-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#left-eye-group{
	 transform-origin: 865.582px 850.9px;
	 animation-name: left-eye-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#top-muzzle{
	 transform-origin: 1104.094px 964.129px;
	 animation-name: top-muzzle-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#bottom-muzzle{
	 transform-origin: 1003.94px 1124.76px;
	 animation-name: bottom-muzzle-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#right-ear-group{
	 transform-origin: 1340.01px 716.84px;
	 animation-name: right-ear-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#left-ear-group{
	 transform-origin: 671.28px 737.52px;
	 animation-name: left-ear-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#right-horn-group{
	 transform-origin: 1241.365px 589.3926px;
	 animation-name: right-horn-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#left-horn-group{
	 transform-origin: 772.2922px 589.3914px;
	 animation-name: left-horn-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#hair-group{
	 transform-origin: 1007.618px 683.888px;
	 animation-name: hair-details-fade;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	#eye-blink{
	 transform-origin: 1168.178px 736px;
	 animation-name: blink;
	 animation-timing-function: linear;
	 animation-duration: 5s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	}

	@keyframes zodiac-rotate{
	0%{
		transform: rotate(0deg);
	}
	5%{
		transform: rotate(0deg);
	}
	 40%{
		transform: rotate(360deg);
	 }
	 50%{
		transform: rotate(360deg);
	 }
	 100%{
		transform: rotate(360deg);
	 }
	}

	@keyframes zodiac-counter-rotate-ox{
	0%{
		transform: rotate(0deg);
	}
	5%{
		transform: rotate(0deg);
	}
	 40%{
		transform: rotate(-360deg);
	 }
	 50%{
		transform: rotate(-360deg);
	 }
	 100%{
		transform: rotate(-360deg);
	 }
	}

	@keyframes zodiac-counter-rotate{
	0%{
		transform: rotate(0deg);
		opacity: 1;
	}
	5%{
		transform: rotate(0deg);
		opacity: 1;
	}
	 40%{
		transform: rotate(-360deg);
		opacity: 0;
	 }
	 50%{
		transform: rotate(-360deg);
		opacity: 0;
	 }
	 100%{
		transform: rotate(-360deg);
		opacity: 1;
	 }
	}

	@keyframes body-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 12.5%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes face-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 20%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes hair-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 27.5%{
		 opacity: 0.25;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 0.25;
		 transform: scale(1);
	 }
	}

	@keyframes right-eye-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 35%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
			 transform: scale(1);
	 }
	}

	@keyframes left-eye-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 42.5%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes top-muzzle-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 50%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes bottom-muzzle-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 57.5%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes right-ear-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 15%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 65%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes left-ear-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 15%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 72.5%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes right-horn-fade{
	0%{
		opacity: 0;
		transform: scale(0.85);
	}
	 50%{
		 opacity: 0;
		 transform: scale(0.85);
	 }
	 80%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes left-horn-fade{
	0%{
		opacity: 0;
		transform: scale(0.85);
	}
	 50%{
		 opacity: 0;
		 transform: scale(0.85);
	 }
	 80%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes hair-details-fade{
	0%{
		opacity: 0;
		transform: scale(0.9);
	}
	 5%{
		 opacity: 0;
		 transform: scale(0.9);
	 }
	 95%{
		 opacity: 1;
		 transform: scale(1);
	 }
	 100%{
		 opacity: 1;
		 transform: scale(1);
	 }
	}

	@keyframes blink{
	0%{
		opacity: 0;
		transform: scaley(0);
	}
	 5%{
		 opacity: 0;
		 transform: scaley(0);
	 }
	 95%{
		 opacity: 0.75;
		 transform: scaley(0);
	 }
	 97%{
		 opacity: 1;
		 transform: scaley(1);
	 }
	 98%{
		 opacity: 1;
		 transform: scaley(1);
	 }
	 99%{
		 opacity: 0.75;
		 transform: scaley(0);
	 }
	 100%{
		 opacity: 1;
		 transform: scaley(0);
	 }
	}
</style>



</head>

<body>
  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">

	.st0{fill:none;}
	.st1{fill:none;stroke:#FA372D;stroke-width:3.6;}
	.st2{display:none;}
	.st3{display:inline;}
	.st4{fill:none;stroke:#03E2FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st5{fill:none;stroke:#03E2FF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st6{opacity:0.25;fill:#FF9100;}
	.st7{opacity:0.1;fill:url(#body02_2_);}
	.st8{opacity:0.15;fill:#FF9100;}
	.st9{opacity:0.5;fill:#FF9100;}
	.st10{fill:#FF9100;}
	.st11{opacity:0.5;fill:#FA372D;}
	.st12{opacity:0.5;fill:#540223;}
	.st13{opacity:0.502;fill:#03E2FF;}
	.st14{opacity:0.502;fill:#540223;}
	.st15{opacity:0.502;fill:#FA372D;}
	.st16{opacity:0.25;fill:#FA372D;}
	.st17{opacity:0.75;fill:#540223;}
	.st18{opacity:0.251;fill:#FA372D;}
	.st19{opacity:0.749;fill:#540223;}
	.st20{fill:#03E2FF;}
	.st21{opacity:0.5;fill:#FFFFFF;}
	.st22{opacity:0.1;fill:url(#hair01_2_);}
</style>
<pattern  width="72" height="72" patternUnits="userSpaceOnUse" id="_x36__lpi_30_x25_" viewBox="72.25 -72 72 72" style="overflow:visible;">
	<g>
		<rect x="72.25" y="-72" class="st0" width="72" height="72"/>
		<g>
			<line class="st1" x1="144" y1="-6" x2="216.5" y2="-6"/>
			<line class="st1" x1="144" y1="-30" x2="216.5" y2="-30"/>
			<line class="st1" x1="144" y1="-54" x2="216.5" y2="-54"/>
			<line class="st1" x1="144" y1="-18" x2="216.5" y2="-18"/>
			<line class="st1" x1="144" y1="-42" x2="216.5" y2="-42"/>
			<line class="st1" x1="144" y1="-66" x2="216.5" y2="-66".........完整代码请登录后点击上方下载按钮下载查看