svg+css实现雪地雪人下雪动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现雪地雪人下雪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> *, html, body { box-sizing: border-box; } body { height: 100vh; background: linear-gradient(#003154, #64A9EA) no-repeat; overflow-x: hidden; margin: 0; padding: 0; } .st0 { fill: #E7F4FA; } #ground { fill: #E7F4FA; } #shadow, #mouth { fill: #B9C3C6; } #arm-r { fill: none; stroke: #202123; stroke-width: 3; stroke-miterlimit: 10; } #head, #body { fill: #E7F4FA; } #eyes { fill: #202123; } #nose { fill: #E7B75C; } #arm-l { fill: none; stroke: #202123; stroke-width: 4; stroke-miterlimit: 10; } #buttons { fill: #808080; } .background { height: 100vh; position: relative; } svg.background__ground { position: absolute; bottom: 0; } @media screen and (min-width: 1400px) { svg.background__ground { bottom: -5em; } } #snowman { width: 18em; position: absolute; bottom: 0; margin: 1em; } @media screen and (min-width: 720px) { #snowman { bottom: 3em; left: 2em; } } @media screen and (min-width: 900px) { #snowman { bottom: 5em; left: 3em; } } @media screen and (min-width: 1100px) { #snowman { bottom: 8em; left: 5em; } } g.background__snowman { -webkit-animation: rock 6s ease-in-out 2s infinite; animation: rock 6s ease-in-out 2s infinite; transform-origin: 50% 100%; } .container--snowflakes { max-width: 1200px; margin: 3em auto 1em auto; } #snowflakes-1 { opacity: 0; -webkit-animation: snowfall 2.2s ease-out 1s infinite; animation: snowfall 2.2s ease-out 1s infinite; } #snowflakes-2 { opacity: 0; -webkit-animation: snowfall 2.5s ease-out 0.7s infinite; animation: snowfall 2.5s ease-out 0.7s infinite; } #snowflakes-3 { opacity: 0; -webkit-animation: snowfall 3s ease-out 1.2s infinite; animation: snowfall 3s ease-out 1.2s infinite; } #snowflakes-4 { opacity: 0; -webkit-animation: snowfall 2.8s ease-out 0.8s infinite; animation: snowfall 2.8s ease-out 0.8s infinite; } @-webkit-keyframes snowfall { 0% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: 0; } 100% { transform: translate(-2em, 10em); } } @keyframes snowfall { 0% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: 0; } 100% { transform: translate(-2em, 10em); } } @-webkit-keyframes rock { 0% { transform: rotate(0); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } 100% { transform: rotate(0); } } @keyframes rock { 0% { transform: rotate(0); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } 100% { transform: rotate(0); } } </style> </head> <body> <div class="background"> <!--ground--> <svg class="background__ground" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_2" x="0" y="0" viewBox="0 0 1314 227.7" xml:space="preserve"> <g id="ground"> <path class="st0" d="M0 21.6c141-41.8 293.2-11.1 441.1-5.1 107.2 4.4 214.4-4.5 321.6-9.3C814.4 4.8 866.3 3.4 918 8c46.2 4.1 92 13.1 138.3 13.2 86.5 0.1 175.7-30.4 257.7-2.5v209H0V21.6z"/></g> </svg> <!--snowman--> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="snowman" x="0" y="0" viewBox="0 -20 300 250" xml:space="preserve" enable-background="new 0 0 178 219.4"> <ellipse id="shadow" transform="matrix(0.9976 -6.986409e-02 6.986409e-02 0.9976 -14.0967 6.4916)" class="st0" cx="85.8" cy="204.8" rx="68.9" ry="13.8"/> <g class="background__snowman"> <g id="arm-r"> <polyline class="st1" points="130 91.5 155.5 66.5 173.1 63.5 176.........完整代码请登录后点击上方下载按钮下载查看
网友评论0