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,6-29,10.4-35.5,12.6c11.8-3.1,46-7.1,98.9,25.9
		c41.5,25.9,84.8,24.9,111.6,20.4c7.4-5.6,13.6-12.6,18.2-20.6C725.4,375.7,654.2,403.4,587.7,361.9z" />
<path class="st1" d="M399.4,201.5c-5.3-13-6.2-28.5-0.1-46.7c-0.1-6.6,0.3-13.2,1.1-19.7l10.4-44.4c-1.9,6.4-6.3,18.8-16.3,41.8
		C381.8,161.6,386.6,184.4,399.4,201.5z" />
<path class="st1" d="M690.5,297.3c-20.6-23.3-54.1-31.1-72.8-33.7l-5.6,12.7c0,0,56.7,1.3,86.4,34.9c16.4,18.6,46.5,30,70,36.4
		l25.5-6.9C794,340.8,720.2,330.9,690.5,297.3z" />
<path class="st1" d="M287.2,288.2c27.7-11.9-10.5-78.4-10.5-78.4l-1-0.5c9.5,20.1,23.4,56.5,3.6,64.9
		c-18.5,7.9-35.8-11.8-45.3-25.8c0.3,1,0.5,1.5,0.5,1.5S259.5,300.1,287.2,288.2z" />
<path class="st1" d="M377.5,331.1c0,0,8.3-25.7-7.3-41.6c3.8,13.7-0.7,27.6-0.7,27.6c-10.2-22.9-45.2-32.9-60.6-36.2
		c0.6,7.6,0.7,12.6,0.7,12.6S364.3,301.4,377.5,331.1z" />
<path class="st1" d="M410.8,90.7c1.5-5,1.5-6.4,1.5-6.4L410.8,90.7z" />
<path class="st1" d="M81.8,354.9c0.1,0,0.3-0.1,0.4-0.1c27.7-9.2,51.4-44.2,75.8-56s38.9-27.7,71.9-10.5c0,0-5.8-23.6-16.9-39.1
		c3.7,8.1,6.7,16.5,8.9,25.1c-33-17.1-47.5-1.3-71.9,10.5s-48.1,46.8-75.8,56S1,331.6,1,331.6s30.3,19.1,69.2,22.4
		C74.6,354.4,78.4,354.7,81.8,354.9z" />
<path class="st1" d="M202.1,223c0,0-1.1,0-3,0l-6-14c0.6,0,1,0,1,0s-4.6-60.7-13.4-89c0.1,0.1,0.2,0.1,0.3,0.2
		C194.9,126.7,202.1,223,202.1,223z" />
<path class="st1" d="M356.6,675c12.1-37,41.1-139.4,18.3-207.5c-9.9-29.4-19-48.1-26.8-60.1c5.8,11.3,12.1,26.3,18.8,46.1
		c28.3,84.4-23.1,221.5-23.1,221.5H356.6z" />
<path class="st1" d="M344.5,360.7c-8-3.5-16.5-5.6-25.1-6.1c-4.2-8.7-4.8-13.2,0.6-13c1.5,0.3,3,0.6,4.5,1
		C335.1,351.5,344.5,360.7,344.5,360.7z" />
<path class="st1" d="M166.1,99.7c0.8,1.3,1.7,2.4,2.7,3.5C168,101.9,167.1,100.8,166.1,99.7z" />
<path class="st1" d="M286.5,207.1c1,1,2,2,2.9,3.1c-2.9-6.9-6.5-12.9-10.9-17.1c-21.8-20.4-57.3-19.1-57.3-19.1l44.6,20.5
		C273.4,197.3,280.5,201.6,286.5,207.1z" />
<path class="st1" d="M333.9,118c2.7,3.9,1.2,20.4-1.3,37.2c-5.2,34.5,0.5,69.7,16.3,100.7c2.1,4.2,4.4,8.2,7,12.1
		c-15.1-30.6-20.4-65.1-15.4-98.8c2.5-16.9,4-33.4,1.3-37.2c-5.9-8.6-31-61.3-33-75.1c-0.6-5..........完整代码请登录后点击上方下载按钮下载查看