svg实现孔雀开屏动画效果代码-html代码-BFW代码库

svg实现孔雀开屏动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现孔雀开屏动画效果代码

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

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

<head>
    <meta charset="UTF-8">


</head>

<body>
    <!-- partial:index.partial.html -->
    <svg style="display:block; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" viewBox="0 0 300 150">
	<defs>
		<g id="feather">
			<path d="M150,150 l-30,-100 a30,30 0 0,1 60,0 Z" fill="#7DC65C" style="fill-opacity: 0.85;"/>
		</g>
		<g id="crown">
			<path d="M150,75 l-1.25,-6 a1.25,1.25 0 0,1 2.5,0 Z" fill="#fff"/>
		</g>
	</defs>

	<use xlink:href="#feather" x="0" y="0"/>
	<use xlink:href="#feather" x="0" y="0">
		<animateTransform attributeName="transform" type="rotate"  attributeType="XML" repeatCount="indefinite" values="23,150,150; 20,150,150; 23,150,150" dur="2s"/>
	</use>
	<use xlink:href="#feather" x="0" y="0">
		<animateTransform attributeName="transform" type="rotate"  attributeType="XML" repeatCount="indefinite" values="46,150,150; 40,150,150; 46,150,150" dur="2s"/>
	</use>
	<use xlink:href="#feather" x="0" y="0">
		<animateTransform attributeName="transform" type="rotate"  attributeType="XML" repeatCount="indefinite" values="69,150,150; 60,150,150; 69,150,150" dur="2s"/>
	</use>
	<use xlink:href="#feather&.........完整代码请登录后点击上方下载按钮下载查看