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:none;stroke-linejoin:round;stroke-opacity:1"                      d="m 112.76953,768.84094 a 14.226992,12.76218 0 0 0 -14.226561,12.76382 14.226992,12.76218 0 0 0 9.144531,11.90339 c -0.16799,0.4127 -0.33469,0.82735 -0.48828,1.26174 -6.18133,17.48223 1.46522,47.62313 18.32422,52.72919 16.85901,5.10606 39.90852,-17.06741 46.08984,-34.54964 0.39776,-1.12496 0.71556,-2.20769 0.96094,-3.25378 a 14.226992,12.76218 0 0 0 4.09766,0.54591 14.226992,12.76218 0 0 0 14.22656,-12.76201 14.226992,12.76218 0 0 0 -14.22656,-12.76202 14.226992,12.76218 0 0 0 -11.62305,5.41391 c -4.41982,-3.16185 -10.29797,-5.52745 -16.80469,-7.49813 -7.27047,-2.20199 -14.75163,-3.49354 -21.4082,-2.85428 a 14.226992,12.76218 0 0 0 -14.06641,-10.9381 z"                      id="path4153" /><path style="fill:#ffeeaa;stroke:none"                      d="m 126.66016,807.08042 a 38.783027,30.83605 3.9431017 0 0 -21.57032,5.03327 c 0.39627,15.10376 7.84688,31.8379 20.4336,35.42876 12.43445,3.54742 28.22839,-6.88561 38.14648,-19.21193 a 38.783027,30.83605 3.9431017 0 0 -30.41601,-20.72055 38.783027,30.83605 3.9431017 0 0 -6.59375,-0.52955 z"                      id="path4157" /><path style="fill:#ffeeaa;stroke:none"                      d="m 112.76953,774.22349 a 8.4386463,8.0717487 0 0 0 -8.43945,8.07226 8.4386463,8.0717487 0 0 0 5.92187,7.70313 c 2.80278,-4.33699 6.56494,-7.03141 10.91016,-8.48242 a 8.4386463,8.0717487 0 0 0 -8.39258,-7.29297 z"                      id="path4164" /><path style="fill:#ffeeaa;stroke:none"                      d="m 176.67188,790.1981 a 9.7533636,9.2488785 0 0 0 -8.28126,4.38281 c 3.21045,3.57246 5.02334,7.95717 4.79297,13.49219 a 9.7533636,9.2488785 0 0 0 3.48829,0.62304 9.7533636,9.2488785 0 0 0 9.75195,-9.24804 9.7533636,9.2488785 0 0 0 -9.75195,-9.25 z"                      id="path4171" /><ellipse style="fill:#ffaaaa;stroke:none"                         id="path4176"                         cx="254.68137"                         cy="786.78296"                         rx="15.975336"                         ry="11.434978"                         transform="matrix(0.98848236,0.15133611,-0.15133611,0.98848236,0,0)" /><ellipse style="fill:#000000;stroke:none"                         id="path4178"                         cx="127.97086"                         cy="799.11102"                         rx="1.8497758".........完整代码请登录后点击上方下载按钮下载查看