svg+css实现可爱老虎弹簧蹦蹦跳动画效果代码-html代码-BFW代码库

svg+css实现可爱老虎弹簧蹦蹦跳动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现可爱老虎弹簧蹦蹦跳动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
	box-sizing:border-box;
}
body {
	align-items:center;
	background-color:#29f1c3;
	display:flex;
	justify-content:center;
	min-height:100vh;
}
.tiger {
	height:200px;
	-webkit-animation:jump 0.5s infinite ease-out;
	animation:jump 0.5s infinite ease-out;
}
@media (min-width:768px) and (min-height:600px) {
	.tiger {
	height:350px;
}
}.tiger__tail {
	d:path("m 122.0852,915.81508 1e-5,8.07175 -1e-5,8.07175 -0.67264,10.08968 0.67264,8.7444 1.00897,9.08072 10e-6,7.73542 1.34528,9.75337 -0.33632,14.12556");
	stroke:#f60;
	stroke-width:5;
	stroke-linecap:round;
	stroke-linejoin:round;
	-webkit-animation:bounce 0.5s infinite ease-out;
	animation:bounce 0.5s infinite ease-out;
}
@-webkit-keyframes jump {
	0%,100% {
	-webkit-transform:translateY(-45%);
	transform:translateY(-45%);
}
50% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}@keyframes jump {
	0%,100% {
	-webkit-transform:translateY(-45%);
	transform:translateY(-45%);
}
50% {
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}@-webkit-keyframes bounce {
	0%,100% {
	d:path("m 122.0852,915.81508 1e-5,8.07175 -1e-5,8.07175 -0.67264,10.08968 0.67264,8.7444 1.00897,9.08072 10e-6,7.73542 1.34528,9.75337 -0.33632,14.12556");
}
50% {
	d:path("m 122.0852,915.81508 14.12557,17.15247 -25.22422,-4.70852 24.55157,18.16143 -24.21525,-5.04484 17.48879,10.76233 -14.7982,1.68161 10.426,2.69059 0.67265,12.78027".........完整代码请登录后点击上方下载按钮下载查看