纯css实现一个新冠病毒效果-html代码-BFW代码库

代码语言：html
代码描述：纯css实现一个新冠病毒效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
		body {
			margin: 0px;
			padding: 0px;
			width: 100vw;
    	height: 100vh;
		}

		body {
			display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		  background: #080e1e;
			background: radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
			background: -webkit-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
		  background: -moz-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
		  background: -o-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);			
		}

		#covid-19 { 
			width: 220px; 
			height: 220px; 
			animation-name: float;
			animation-duration: 1s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		.shadow {
			width: 100px;
		  height: 10px;
		  background: #1c1c1c;		    
		  border-radius: 70%;
		  opacity: 1;
		  filter: blur(3px);
		  animation-name: animate-shadow;
			animation-duration: 1s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		g.evelope {
			animation-name: rotate;
			transform-origin: 100px 105px;
			animation-duration: 2s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		ellipse.left-eyeball,
		ellipse.right-eyeball {
			animation-name: moveEyeBalls;
			transform-origin: 50% 50%;
			animation-duration: 3s;
			animation-direction: normal;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		.left-eyebrows,
		.right-eyebrows {
			animation-name: moveEyebrows;
			transform-origin: 50% 50%;
			animation-duration: 1s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		.mouth {
			animation-name: moveMouth;
			transform-origin: 50% 50%;
			animation-duration: 2s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}

		@keyframes moveMouth {
			
			0% {
				transform: rotate(0deg);
			} 100% {
				transform: rotate(12deg);
			}

		}

		@keyframes moveEyebrows {
			
			0% {
				transform: translateY(0px);
			} 100% {
				transform: translateY(-1px);
			}

		}

		@keyframes moveEyeBalls {
			
			0% {
				transform: translateX(0px);
			} 25% {
				transform: translateX(2px);
			} 50%{
				transform: translateX(-2px);
			} 75%{
				transform: translateX(-2px);
			} 100% {
				transform: translateX(0px);
			}

		}

		@keyframes float {
			
			0% {
				transform: translateY(0px);
			} 100% {
				transform: translateY(20px);
			}
		}

		@keyframes animate-shadow {
			
			0% {
				transform: scale(1);
			} 100% {
				transform: scale(1.2);
			}
		}

		@keyframes rotate {
			
			0% {
				transform: rotate(0deg);
			} 50% {
				transform: rotate(4deg);
			} 100% {
				transform: rotate(0deg);
			}
			
		}
</style>

</head>
<body translate="no">
<svg id="covid-19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="body">
<g class="evelope">
<g>
<rect x="103.956" y="57.628" transform="matrix(-0.2015 0.9795 -0.9795 -0.2015 186.9409 -34.9744)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175" />
<ellipse transform="matrix(0.9784 0.2068 -0.2068 0.9784 13.3685 -21.4106)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="109.074" cy="53.226" rx="3.557" ry="1.779" />
</g>
<g>
<rect x="120.357" y="64.516" transform="matrix(-0.6423 0.7665 -0.7665 -0.6423 254.1387 12.601)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175" />
<ellipse transform="matrix(0.7629 0.6465 -0.6465 0.7629 70.0389 -68.1447)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="127.921" cy="61.411" rx="3.557" ry="1.778" />
</g>
<g>
<rect x="134.108" y="77.591" transform="matrix(-0.8209 0.5711 -0.5711 -0.8209 295.9926 64.5149)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175" />
<ellipse transform="matrix(0.5666 0.824 -0.824 0.5666 124.1331 -84.7547)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="142.637" cy="75.628" rx="3.558" ry="1.779" />
</g>
<g>
<rect x="140.875" y="97.239" transform="matrix(-0.9835 0.1808 -0.1808 -0.9835 304.683 168.8848)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M150.863,101.02c-0.967,0.17-2.029-1.256-2.374-3.192
							c-0.346-1.935,0.16-3.643,1.125-3.814c0.97-0.174,2.032,1.256,2.377,3.191C152.335,99.138,151.829,100.848,150.863,101.02z" />
</g>
<g>
<rect x="139.409" y="117.607" transform="matrix(-0.958 -0.2867 0.2867 -0.958 246.3248 273.4525)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M147.492,123.921c-0.938-0.287-1.235-2.041-0.662-3.922
							s1.8-3.172,2.737-2.885c0.942,0.285,1.239,2.043,0.665,3.924C149.659,122.917,148.431,124.208,147.492,123.921z" />
</g>
<g>
<rect x="129.26" y="135.677" transform="matrix(-0.8199 -0.5726 0.5726 -0.8199 163.7922 325.0609)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M135.486,143.081c-0.8-0.568-0.533-2.326,0.602-3.932
							c1.134-1.605,2.703-2.447,3.504-1.881c0.805,0.566,0.536,2.328-0.6,3.934C137.859,142.806,136.288,143.646,135.486,143.081z" />
</g>
<g>
<rect x="109.059" y="148.468" transform="matrix(-0.4482 -0.8939 0.8939 -0.4482 29.7178 317.4522)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M111.98,156.278c-0.432-0.881,0.64-2.299,2.402-3.17
							c1.761-0.873,3.542-0.865,3.977,0.014c0.438,0.883-0.638,2.303-2.401,3.174C114.198,157.167,112.417,157.157,111.98,156.278z" />
</g>
<g>
<rect x="87.73" y="149.962" transform="matrix(0.062 -0.9981 0.9981 0.062 -64.927 233.0152)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M87.387,156.435c0.07-0.98,1.708-1.666,3.67-1.533
							c1.96,0.131,3.496,1.033,3.431,2.012c-0.066,0.982-1.71,1.67-3.672,1.535C88.856,158.317,87.322,157.413,87.387,156.435z" />
</g>
<g>
<rect x="69.332" y="143.727" transform="matrix(0.6362 -0.7716 0.7716 0.6362 -85.1344 109.094)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M66.61,146.757c0.631-0.75,2.361-0.346,3.871,0.914
							c1.509,1.258,2.223,2.891,1.596,3.645c-0.63,0.756-2.365,0.348-3.875-0.914C66.694,149.146,65.983,147.513,66.61,146.757z" />
</g>
<g>
<rect x="55.152" y="129.772" transform="matrix(0.8659 -0.5001 0.5001 0.8659 -57.5493 47.0135)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.173" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M52.162,130.407c0.854-0.482,2.333,0.502,3.306,2.211
							c0.973,1.705,1.071,3.484,0.219,3.971c-0.854,0.486-2.337-0.502-3.31-2.211C51.404,132.671,51.31,130.896,52.162,130.407z" />
</g>
<g>
<rect x="48.102" y="110.994" transform="matrix(0.9957 -0.0924 0.0924 0.9957 -10.1365 5.2739)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173" />
<path fill="#FF5555" st.........完整代码请登录后点击上方下载按钮下载查看