svg女孩荡秋千动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg女孩荡秋千动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
svg{
    width: 500px ;
    align-self: center;
    justify-self: center;
    margin-left: 30%;
    margin-top: 7%;
}

svg #mujer{
    animation-duration:1.2s;
    animation-name: meser;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes meser{
    from{
        transform: translateX(0) translateY(0);
        
    }
    to{
        transform: translateX(12px) translateY(6px);
    }
}

svg #columpio{
    animation-duration: 1.2s;
    animation-name: cuerdas;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes cuerdas{
    from{
        transform: translateX(0px);
    }
    to{
        transform: translateX(2px);
    }
}

svg #hojas-arbol{
    animation-duration: 3s;
    animation-name: hojas;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes hojas{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.st0{fill:#3F3D56;}
	.st1{opacity:0.1;enable-background:new    ;}
	.st2{fill:#FFB9B9;}
	.st3{fill:#D0CDE1;}
	.st4{fill:#2F2E41;}
	.st5{fill:#0C963A;}
	.st6{fill:#F2F2F2;}
</style>

</head>
<body translate="no">

<svg version="1.1" id="aad34d2c-b6e7-481f-91dd-037f78086296" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 855.3 676" style="enable-background:new 0 0 855.3 676;" xml:space="preserve">
<g id="arbol">
<path class="st0" d="M393.6,23.2c0.5,1.2,0.9,2.4,1.2,3.7C394.2,25,393.7,23.7,393.6,23.2z" />
<path class="st0" d="M411.3,84.4c0,0,0,1.4-1.5,6.4L411.3,84.4z" />
<path class="st0" d="M593.9,292.7c-39.3,20.5-90.8,38.2-106.2,43.3c11.8-3.1,46-7.2,98.9,25.9c66.6,41.5,137.8,13.8,137.8,13.8
		S708.6,406.1,675,408c-33.6,2-121.3-53.4-151-37.6c-29.7,15.8-43.5-4-55.4,35.6c-11.9,39.5-33.6,147.6-8.6,208.3l25,60.6H342.8
		c0,0,51.4-137.1,23.1-221.5c-15.9-47.3-38.1-81.5-46.5-98.9c-4.2-8.7-4.8-13.2,0.6-13c3.1,0.1,8.1,1.8,15.6,5
		c0,0-34.3-33.6-45.5-33.6c-11.2,0-63.9-5.3-81.1-23.1c0,0-24.4-17.1-67.9,25s-33,42.2-71.9,38.9C30.9,350.7,0.9,332.2,0,331.6
		c1.1,0.5,45.8,18.3,73.2,9.2c27.7-9.2,51.4-44.2,75.8-56c24.4-11.9,38.9-27.7,71.9-10.5L199.1,223l-6-14l0,0
		c0,0-7.3-96.2-21.1-102.8c-13.8-6.6-5.3-23.7-31-27c0,0,31.6-4,37.6,17.8c5.9,21.8,46.8,139.1,46.8,139.1s25,50.1,52.7,38.2
		c27.7-11.9-10.5-78.4-10.5-78.4L220.2,174c0,0,35.6-1.3,57.4,19.1c21.8,20.4,23.1,86.4,23.1,86.4s54.7,7.9,67.9,37.6
		c0,0,8.6-26.4-7.9-42.2c-4.1-4-8.4-10.8-12.6-18.9c-15.8-31.1-21.5-66.3-16.3-100.7c2.5-16.9,4-33.4,1.3-37.2
		c-5.9-8.6-31-61.3-33-75.2c-2-13.8,2-42.8,2-42.8s0.7,35.6,8.6,46.8c7.9,11.2,30.3,66.6,30.3,66.6s0,69.9,18.5,104.1
		s54,72.5,52.1,97.6v14.5c0,0,39.5-37.6,36.9-50.1c-2.6-12.5-5.9-42.2-31-60c-25-17.8-41.5-46.1-23.7-87c10-23,14.4-35.3,16.3-41.8
		l-10.4,44.4c0,0-6.6,45.5,11.9,61.3c0,0,0.1,0.1,0.1,0.1c18.4,15.8,42.7,44.7,42.7,44.7l-0.1-1.3l-5.2-93.6l1.1,2.5l8.2,18l7.8,17
		c0,0,36.9-47.5,80.4-63.3C590,104.8,617,49.4,617,49.4l36.9-29l-30.3,36.3c0,0-9.2,42.8-61.3,73.2c-52.1,30.3-85.7,75.1-87.7,102.8
		s-4,52.1-4,52.1s97.6-3.3,119.3-46.1c21.8-42.8,39.6-44.8,39.6-44.8L617,230.7l-13.8,31.6c0,0,56.7,1.3,86.3,34.9
		c29.7,33.6,103.5,43.5,103.5,43.5L751.5,352c0,0-39.6-13.2-77.1-37.6S640.7,268.3,593.9,292.7z" />
<path class="st1" d="M614.9,202.7c-4.2,18.5-9.1,36.3-16,49.9c-21.8,42.9-119.3,46.1-119.3,46.1s0.5-5.7,1.2-14.6
		c24.8-2,92.5-10.8,110.2-45.6c1.6-3.2,3.1-6.6,4.5-10.2L614.9,202.7z" />
<path class="st1" d="M463.2,255.3c0,0-24.4-29-42.8-44.8c-4-3.5-6.9-8.4-8.9-13.9c-0.2-0.4-0.3-0.9-0.5-1.3
		c0.4,0.4,0.9,0.8,1.3,1.2c16.2,13.9,36.9,37.8,41.8,43.6c0.7,0.8,1.1,1.3,1.1,1.3l-5.1-92.4l8.2,18L463.2,255.3z" />
<path class="st1" d="M477.3,172c-0.1,16.2-2.3,25.9-2.3,25.9s36.9-47.4,80.4-63.3c2.6-1.6,5.2-3.2,7.8-4.8
		c52.1-30.3,61.3-73.2,61.3-73.2l30.3-36.3l-36.9,29c0,0-27,55.4-70.5,71.2C517.8,131.4,491.2,156.9,477.3,172z" />
<path class="st1" d="M420.3,329.1v14.5c0,0,39.6-37.6,36.9-50.1c-2-9.6-4.4-29.2-16.7-45.8c5.5,12.6,7.2,24.9,8.7,31.8
		c1.9,9-17.9,30.8-29.3,42.5C420.4,324.3,420.5,326.7,420.3,329.1z" />
<path class="st1" d="M367.3,229.6c0.3,0.7,0.6,1.3,1,2c10.1,18.8,25.3,38.7,36.8,57.1C395.8,270.4,379.7,249.7,367.3,229.6z" />
<path class="st1" d="M587.7,361.9c-21.7-13.5-40.2-20.8-55.4-24.5c-15.9.........完整代码请登录后点击上方下载按钮下载查看