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

纯css实现一个新冠病毒效果

代码语言：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% {
	.........完整代码请登录后点击上方下载按钮下载查看