svg+css实现展翅飞翔的小猪飞猪动画效果代码-html代码-BFW代码库

svg+css实现展翅飞翔的小猪飞猪动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现展翅飞翔的小猪飞猪动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	position:relative;
	background-color:#88a5c8;
	height:100vh;
}
.pig {
	width:300px;
	height:300px;
	animation-name:flying;
	animation-duration:10s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
.pig-container {
	position:absolute;
	width:300px;
	height:300px;
	top:20%;
	right:0;
	animation-name:floating;
	animation-duration:1s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
@keyframes flying {
	0% {
	transform:translateX(60vw);
}
100% {
	transform:translateX(-110vw);
}
}@keyframes floating {
	to {
	transform:translateY(50px);
}
from {
	transform:translateY(-50px);
}
}#front-wing,#back-wing {
	animation-name:flap;
	animation-duration:0.1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	transform-box:fill-box;
	transform-origin:bottom left;
}
@keyframes flap {
	to {
	transform:rotate(-10deg)
}
from {
	transform:rotate(60deg)
}
}#back-wing {
	animation-delay:0.02s;
}

</style>
</head>

<body>
    <div class="pig-container"><svg class="pig" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 226.3 246.7">
        <style>
            .st1 { 
            fill: #efbddc; 
            }                
            .st2 {
            fill: #fccae7;
            }
        </style>
    
    <g id="pig"><path id="back-wing" fill="#efefef" d="M101.6 77.3s20.8-52.7 39.4-62.2c18.6-9.5 12.8 21.6 9.2 28 9.1-1.9 7.6 9.7 2.9 15.5 3.5 3.1-3 15.5-14.2 20.7 2.6 5.3-2.2 9.5-5.8 12.4-10.6 23.2-42.9 28.2-31.5-14.4z" /><g id="back-right-hoof"><path d="M126.9 144.8c-12.5 8.7 4.2 63.7 5.1 67.5 1.3 5.2 26 5.1 25.5.1-.7-6.8 14-55.3 14-55.3" class="st1" /><path d="M158.4 211.4l-27.9-1.6s.7 12.2 2.3 13.3c4.3 3 10.7-4.1 12.1-3.2 1.5.9 3.9 5.3 9.1 6.1 4.1.5 4.4-14.6 4.4-14.6z" /></g><g id="front-right-hoof"><path d="M83.9 170.3s.9 28.5 0 32c-1.3 4.8-25.9 4.7-25.5.1.7-6.2.6-31.9.6-31.9" class="st1" /><path d="M57.6 201.5l27.6-1.8s-.5 11.4-2.1 12.4c-4.3 2.7-10.7-3.7-12.1-3-1.5.8-3.9 4.9-9.1 5.6-4 .6-4.3-13.2-4.3-13.2z" /></g><path id="body" d="M55.1 85.4c-23.4 10-45.7 33.1-30.5 72.7 13.9 36.3 175.7 90.2 185-13 7.8-87.1-88.4-55.6-93.1-55.6-12-.1-38.4-13.9-61.4-4.1z" class="st2" /><path id="front-wing" fill="#fff" d="M126.7 82.9s44.7-49.1 65.5-51.2c20.7-2.1 3.6 24.9-2.1 29.5 9.1 1.5 3.3 11.9-3.2 15.5 2 4.1-8.6 13.4-20.9 14.2.4 6-5.4 9.3-9.8 10.6-34.2 6.3-56.1 17.2-29.5-18.6z" /><path id="tail" d="M189.8 100.7s.3.2.9.5c.3.2.6.3.9.4.3.2.8.3 1.3.5 1 .4 2.3.7 3.8.9 1.5.2 .........完整代码请登录后点击上方下载按钮下载查看