纯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=&quo.........完整代码请登录后点击上方下载按钮下载查看