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

代码语言：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"                      d="m 88.169922,69.929688 a 4.0358744,5.7174888 31.098788 0 0 -3.921875,1.9375 9.5852022,9.0213661 31.098788 0 0 -0.205078,-0.132813 9.5852022,9.0213661 31.098788 0 0 -12.867188,2.773437 9.5852022,9.0213661 31.098788 0 0 3.548828,12.675782 9.5852022,9.0213661 31.098788 0 0 8.455079,0.849609 l 25.626952,15.458987 c -4.92693,11.14541 -8.62215,24.0289 -10.273437,34.28125 -0.543378,3.37368 -0.345358,6.78363 0.566406,9.99609 l -13.009765,5.36524 a 13.474884,10.775801 71.264172 0 0 -11.064453,-5.5625 13.474884,10.775801 71.264172 0 0 -2.06836,0.59961 13.474884,10.775801 71.264172 0 0 -5.708984,14.2246 13.474884,10.775801 71.264172 0 0 13.611328,11.39454 13.474884,10.775801 71.264172 0 0 3.423828,-1.35743 l 26.179687,-10.79492 c 2.67295,1.42467 5.76757,2.46604 9.2793,3 5.00281,0.76069 9.6536,0.57048 13.76172,-0.36719 l 27.95117,11.5254 a 10.775801,13.474884 18.735828 0 0 3.42383,1.35742 10.775801,13.474884 18.735828 0 0 13.61132,-11.39453 10.775801,13.474884 18.735828 0 0 -5.70898,-14.22461 10.775801,13.474884 18.735828 0 0 -2.06836,-0.60157 10.775801,13.474884 18.735828 0 0 -11.0625,5.56446 l -10.16797,-4.19336 c 0.35133,-0.81485 0.6446,-1.65513 0.86328,-2.52149 2.67875,-10.61231 2.53748,-25.82232 0.11719,-39.47851 l 29.12109,-9.75 a 9.0213661,9.5852022 71.489075 0 0 8.43946,1.01367 9.0213661,9.5852022 71.489075 0 0 6.22461,-11.597657 9.0213661,9.5852022 71.489075 0 0 -11.95313,-5.511719 9.0213661,9.5852022 71.489075 0 0 -0.23047,0.08594 5.7174888,4.0358744 71.489075 0 0 -4.9707,-2.664063 5.7174888,4.0358744 71.489075 0 0 -2.01367,6.705079 5.7174888,4.0358744 71.489075 0 0 0.89062,1.830078 l -27.93945,9.355468 c -3.35472,-11.501141 -8.5561,-20.240496 -15.19531,-21.25 -6.84398,-1.040638 -13.51137,5.573609 -19.17383,15.332032 L 88.916016,78.925781 a 4.0358744,5.7174888 31.098788 0 0 1.267578,-1.591797 4.0358744,5.7174888 31.098788 0 0 -0.501953,-6.982422 4.0358744,5.7174888 31.098788 0 0 -1.511719,-0.421874 z"                      transform="translate(0,752.36216)"                      id="path4262" /><path id="path4265"                      d="m 143.24738,891.88294 c -1.81441,7.1881 -10.37239,12.00214 -21.30002,10.34056 -10.92764,-1.66155 -16.10755,-10.33991 -14.7613,-18.6984 2.66214,-16.52845 12.94724,-42.90041 23.87487,-41.23886 10.92763,1.66158 16.28378,33.36439 12.18645,49.5967 z"                      style="fill:#ffe680;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path style="fill:#ff6600;stroke:n.........完整代码请登录后点击上方下载按钮下载查看