svg实现一个牛年牛首动画效果代码
代码语言：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"/>
</g>
<g>
<line class="st1" x1="72" y1="-6" x2="144.5" y2="-6"/>
<line class="st1" x1="72" y1="-30" x2="144.5" y2="-30"/>
<line class="st1" x1="72" y1="-54" x2="144.5" y2="-54"/>
<line class="st1" x1="72" y1="-18" x2="144.5" y2="-18"/>
<line class="st1" x1="72" y1="-42" x2="144.5" y2="-42"/>
<line class="st1" x1="72" y1="-66" x2="144.5" y2="-66"/>
</g>
<g>
<line class="st1" x1="0" y1="-6" x2="72.5" y2="-6"/>
<line class="st1" x1="0" y1="-30" x2="72.5" y2="-30"/>
<line class="st1" x1="0" y1="-54" x2="72.5" y2="-54"/>
<line class="st1" x1="0" y1="-18" x2="72.5" y2="-18"/>
<line class="st1" x1="0" y1="-42" x2="72.5" y2="-42"/>
<line class="st1" x1="0" y1="-66" x2="72.5" y2="-66"/>
</g>
</g>
</pattern>
<g id="zodiac">
<g id="all-zodiac">
<g class="st2">
<g class="st3">
<circle class="st4" cx="1000.262" cy="1000" r="742.5"/>
</g>
<g class="st3">
<line class="st4" x1="1000.262" y1="1000" x2="1000.262" y2="1742.5"/>
<line class="st4" x1="1000.262" y1="1000" x2="1371.512" y2="1643.024"/>
<line class="st4" x1="1000.262" y1="1000" x2="1643.286" y2="1371.25"/>
<line class="st4" x1="1000.262" y1="1000" x2="1742.762" y2="1000"/>
<line class="st4" x1="1000.262" y1="1000" x2="1643.286" y2="628.75"/>
<line class="st4" x1="1000.262" y1="1000" x2="1371.512" y2="356.976"/>
<line class="st4" x1="1000.262" y1="1000" x2="1000.262" y2="257.5"/>
<line class="st4" x1="1000.262" y1="1000" x2="629.012" y2="356.976"/>
<line class="st4" x1="1000.262" y1="1000" x2="357.238" y2="628.75"/>
<line class="st4" x1="1000.262" y1="1000" x2="257.762" y2="1000"/>
<line class="st4" x1="1000.262" y1="1000" x2="357.238" y2="1371.25"/>
<line class="st4" x1="1000.262" y1="1000" x2="629.012" y2="1643.024"/>
</g>
</g>
<g id="ox_1_">
<circle class="st0" cx="1000.262" cy="257.5" r="100"/>
<g>
<path class="st5" d="M1010.78,225.162h-21.035c-14.633,0-28.125,7.906-35.277,20.672v0c-7.094,12.663-6.857,28.158,0.622,40.598
l16.071,26.731c13.194,21.947,45.008,21.947,58.203,0l16.071-26.731c7.479-12.44,7.716-27.934,0.622-40.598v0
C1038.904,233.068,1025.413,225.162,1010.78,225.162z"/>
<path class="st5" d="M989.744,225.162c-32.649,0-47.613,28.778-71.211,28.778c0,0,14.715,23.453,32.538,23.453"/>
<path class="st5" d="M989.744,225.162c-38.117,0-78.693-3.166-89.457-39.786c0,0-3.05,49.743,57.373,49.743"/>
<path class="st5" d="M973.133,269.446c0.762-0.822,1.229-1.922,1.229-3.131c0-2.543-2.061-4.604-4.604-4.604
s-4.604,2.061-4.604,4.604s2.061,4.604,4.604,4.604C971.091,270.919,972.293,270.352,973.133,269.446"/>
<path class="st5" d="M963.702,300.837c0,0,20.824-20.824,20.825-20.823c3.336-3.595,5.375-8.409,5.375-13.699
c0-11.125-9.019-20.144-20.144-20.144c-11.125,0-20.144,9.019-20.144,20.144"/>
<path class="st5" d="M918.533,253.94c0,0,6.561,10.428,31.991,1.816"/>
<path class="st5" d="M1010.78,225.162c32.649,0,47.613,28.778,71.211,28.778c0,0-14.714,23.453-32.538,23.453"/>
<path class="st5" d="M1010.78,225.162c38.117,0,78.693-3.166,89.457-39.786c0,0,3.05,49.743-57.374,49.743"/>
<path class="st5" d="M1027.391,269.446c-0.762-0.822-1.229-1.922-1.229-3.131c0-2.543,2.061-4.604,4.604-4.604
s4.604,2.061,4.604,4.604s-2.062,4.604-4.604,4.604C1029.433,270.919,1028.231,270.352,1027.391,269.446"/>
<path class="st5" d="M1036.822,300.837c0,0-20.824-20.824-20.825-20.823c-3.336-3.595-5.375-8.409-5.375-13.699
c0-11.125,9.019-20.144,20.144-20.144c11.125,0,20.144,9.019,20.144,20.144"/>
<path class="st5" d="M1081.991,253.94c0,0-6.561,10.428-31.991,1.816"/>
<path class="st5" d="M986.579,277.393h27.365l-4.117,3.507c-5.512,4.696-13.618,4.696-19.131,0L986.579,277.393z"/>
<path class="st5" d="M979.83,322.841l6.843-7.37c7.32-7.883,19.81-7.839,27.074,0.096l6.659,7.274"/>
</g>
</g>
<g id="tiger">
<circle class="st0" cx="1371.512" cy="357.5" r="100"/>
<g>
<path class="st5" d="M1436.574,371.956c0,27.58-29.129,35.482-65.062,35.482c-35.933,0-65.062-7.902-65.062-35.482
c0-27.58,29.129-64.393,65.062-64.393C1407.444,307.562,1436.574,344.376,1436.574,371.956z"/>
<path class="st5" d="M1360.448,364.438h22.128l-3.329,3.201c-4.457,4.286-11.012,4.286-15.47,0L1360.448,364.438z"/>
<path class="st5" d="M1382.576,364.438l14.838,14.883c2.521,2.529,2.953,6.794,1.001,9.899l-5.792,9.215
c-2.427,3.862-7.385,4.23-10.239,0.76v0c-2.937-3.57-6.903-5.359-10.872-5.371c-3.969,0.011-7.935,1.8-10.872,5.371v0
c-2.854,3.47-7.812,3.102-10.239-0.76l-5.792-9.215c-1.952-3.105-1.52-7.37,1.001-9.899l14.838-14.883"/>
<line class="st5" x1="1371.512" y1="307.562" x2="1371.512" y2="345.852"/>
<line class="st5" x1="1360.448" y1="336.005" x2="1382.576" y2="336.005"/>
<line class="st5" x1="1354.504" y1="325.501" x2="1388.52" y2="325.501"/>
<line class="st5" x1="1345.943" y1="314.996" x2="1397.08" y2="314.996"/>
<path class="st5" d="M1371.512,405.202"/>
<g>
<path class="st5" d="M1341.753,313.718c-8.207-8.207-21.514-8.207-29.721,0c-8.207,8.207-8.207,21.514,0,29.721"/>
<path class="st5" d="M1333.708,321.763c-3.764-3.764-9.866-3.764-13.63,0c-3.764,3.764-3.764,9.866,0,13.63"/>
<path class="st5" d="M1401.271,313.718c8.207-8.207,21.514-8.207,29.721,0c8.207,8.207,8.207,21.514,0,29.721"/>
<path class="st5" d="M1409.316,321.763c3.764-3.764,9.866-3.764,13.63,0c3.764,3.764,3.764,9.866,0,13.63"/>
</g>
<g>
<path class="st5" d="M1347.596,353.32c0.762-0.822,1.229-1.922,1.229-3.131c0-2.543-2.062-4.604-4.604-4.604
s-4.604,2.061-4.604,4.604s2.061,4.604,4.604,4.604C1345.554,354.793,1346.755,354.226,1347.596,353.32"/>
<path class="st5" d="M1395.428,353.32c-0.762-0.822-1.229-1.922-1.229-3.131c0-2.543,2.062-4.604,4.604-4.604
c2.543,0,4.604,2.061,4.604,4.604s-2.062,4.604-4.604,4.604C1397.47,354.793,1396.269,354.226,1395.428,353.32"/>
</g>
<g>
<polyline class="st5" poin.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0