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");
}
}@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");
}
}
    </style>
</head>

<body><svg class='tiger' viewBox="0 0 127.83183 225.18239" preserveAspectRatio='xMinYMin'><g transform="translate(-66.856822,-768.84094)"           id="layer1"><path class='tiger__tail'                  style="fill:none;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><g id="g4371"><path style="fill:#ff6600;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"                .........完整代码请登录后点击上方下载按钮下载查看