纯css无js实现杀死新冠状病毒小游戏-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：纯css无js实现杀死新冠状病毒小游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@charset "UTF-8";
/****** More of My Resets *******/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*** global varialables ***/
:root {
  --common-color1:#c72113;
  --common-color2:#2674c3;
}

html {
  overflow: hidden;
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Standard */
  min-height: 100vh;
}

body {
  counter-reset: corona;
  font-size: 16rem;
  font-family: arial;
}

/***** Game Menu Frame *****/
.game-menu-frame::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.game-header {
  position: relative;
  z-index: 5;
  perspective: 800px;
}

.game-title {
  position: relative;
  z-index: 10;
  margin-top: 20px;
  transform: rotateX(21deg);
  margin-bottom: 40px;
  color: #fff;
  font-size: 54rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -4px;
  text-align: center;
  text-shadow: 2px 1px 0px #d2d2d2, 4px 2px 0px #4f3256, 3px 1px 6px #000000;
  /*-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black;
  text-shadow:2px 0px 5px #1c99ca, 0px 2px 5px #1c99ca, -2px 0px 5px #1c99ca, 0px -2px 5px #1c99ca;*/
}
.game-title .line-1 {
  font-size: 40rem;
  letter-spacing: -2px;
}
.game-title .line-2 {
  font-size: 63rem;
}
.game-title .line-3 {
  font-size: 14rem;
  font-weight: nomral;
  letter-spacing: 0px;
  text-shadow: 1px 1px 0px #d2d2d2;
  margin-top: 10px;
}

.game-nav {
  position: relative;
  z-index: 5;
  width: 360px;
  margin: 0 auto;
  text-align: center;
}
.game-nav-title {
  display: none;
  font-size: 30rem;
  color: #ccc;
  margin-bottom: 20px;
}
.game-nav-item {
  margin-bottom: 10px;
}
.game-nav-button {
  display: block;
  height: 40px;
  line-height: 36px;
  border: solid 2px rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 20rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.game-nav-button:hover, .game-nav-button:focus {
  animation: neon 1.5s ease-in-out infinite alternate;
  outline: none;
}

.game-over {
  position: fixed;
  height: 0px;
  opacity: 0;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  box-sizing: content-box;
  padding-top: 100px;
  background-color: rgba(0, 0, 0, 0.6);
  animation: curtain 0.6s ease-in 100s forwards;
}

.popup {
  display: none;
  position: fixed;
  z-index: 30;
  top: 30px;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  width: 360px;
  padding: 20px;
  min-height: 380px;
  max-height: calc(100vh - 60px);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  border: solid 10px #121212;
  border-radius: 10px;
  background-color: #fff;
}
.popup .close-button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px;
  cursor: pointer;
  font-family: cursive, arial;
  font-size: 30rem;
  line-height: 20px;
}
.popup .game-nav-button {
  margin-top: 20px;
  margin-bottom: 20px;
}

.common-content {
  font-size: 18rem;
  line-height: 1.3;
}
.common-content .common-title {
  font-size: 22rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.common-content p, .common-content ul {
  margin-bottom: 10px;
}
.common-content a {
  color: var(--common-color2);
}
.common-content img {
  display: block;
  max-width: 70%;
  margin: 10px auto;
}

.note {
  color: #ccc;
  line-height: 1.25;
}

[class*="corona-promo-virus"] {
  position: absolute;
  top: -250px;
}

.corona-promo-virus-1 {
  left: 10vw;
  animation: coronaInsideStage 5s linear 1s infinite alternate;
}

.corona-promo-virus-2 {
  right: 10vw;
  animation: coronaInsideStage 5s linear 2s infinite alternate;
}

@keyframes coronaInsideStage {
  to {
    transform: translateY(500px);
  }
}
@keyframes neon {
  from {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0052ff, 0 0 35px #0052ff, 0 0 40px #0052ff, 0 0 50px #0052ff, 0 0 75px #0052ff;
  }
  to {
    box-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #0052ff, 0 0 17px #0052ff, 0 0 20px #0052ff, 0 0 25px #0052ff, 0 0 37px #0052ff;
  }
}
@keyframes curtain {
  from {
    height: 100vh;
    opacity: 0;
  }
  to {
    height: 100vh;
    opacity: 1;
  }
}
/***** Game Frame *****/
.game-frame {
  display: none;
}

.corona-world {
  width: 100vw;
  height: 100vh;
}

/* cursor */
.corona-world,
.corona-virus {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><filter id='grayscale'><feColorMatrix type='saturate' values='0.10'/></filter><text y='50%'>🧼</text></svg>") 16 0, auto;
  /*!emojicursor.app*/
}

.count-down {
  position: absolute;
  z-index: 22;
  left: 20px;
  top: 20px;
  font-size: 40rem;
}
.count-down .icon {
  margin-right: 20px;
}
.count-down .count {
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}
.count-down .count::before, .count-down .count::after {
  animation: countdown 100s step-end 1 forwards;
  content: "";
  width: 1ch;
}
.count-down .count::after {
  animation-duration: 10s;
  animation-iteration-count: 10;
}
@media (max-width: 500px) {
  .count-down {
    top: auto;
    bottom: 20px;
  }
}

.timer {
  position: fixed;
  left: 0;
  top: 0;
  width: 150px;
  height: 10px;
  background-color: #fff;
  border: solid 1px #333;
}
.timer::before {
  content: "";
  width: 0px;
  height: 10px;
  display: block;
  background-color: var(--common-color2);
  animation: timer 100s linear 0s;
}
@media (max-width: 500px) {
  .timer {
    top: auto;
    bottom: 0;
  }
}

@keyframes countdown {
  0% {
    content: "9";
  }
  10% {
    content: "8";
  }
  20% {
    content: "7";
  }
  30% {
    content: "6";
  }
  40% {
    content: "5";
  }
  50% {
    content: "4";
  }
  60% {
    content: "3";
  }
  70% {
    content: "2";
  }
  80% {
    content: "1";
  }
  90%, 100% {
    content: "0";
  }
}
@keyframes timer {
  0% {
    width: 3%;
  }
  85% {
    width: 85%;
    background-color: var(--common-color2);
  }
  90% {
    width: 90%;
    background-color: var(--common-color1);
  }
  100% {
    width: 100%;
    background-color: var(--common-color1);
  }
}
/*** Common Virus ***/
.corona-virus {
  --coronaColor:#000;
  position: relative;
  z-index: 10;
  display: block;
}
.corona-virus .body {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--coronaColor);
  opacity: 1;
  transition: 0.3s;
}

/* virus objects position*/
.corona-location {
  position: absolute;
  transform: scale(0);
  will-change: transfrom;
}

.corona-virus-1-location {
  animation: coronaLocation1 10s linear 960ms;
}
.corona-virus-1-location [class*="eye"]::after {
  animation-delay: 24ms;
}

@keyframes coronaLocation1 {
  0% {
    transform: translateX(-10vw) translateY(40vh) scale(0.4) rotate(44deg);
  }
  20% {
    transform: translateX(20vw) translateY(46vh) scale(0.6) rotate(28deg);
  }
  40% {
    transform: translateX(40vw) translateY(68vh) scale(0.7) rotate(-1deg);
  }
  60% {
    transform: translateX(60vw) translateY(71vh) scale(0.4) rotate(39deg);
  }
  80% {
    transform: translateX(80vw) translateY(39vh) scale(0.5) rotate(13deg);
  }
  100% {
    transform: translateX(110vw) translateY(61vh) scale(0.6) rotate(-25deg);
  }
}
.corona-virus-2-location {
  animation: coronaLocation2 10s linear 1920ms;
}
.corona-virus-2-location [class*="eye"]::after {
  animation-delay: 3713ms;
}

@keyframes coronaLocation2 {
  0% {
    transform: translateX(-10vw) translateY(18vh) scale(0.5) rotate(-12deg);
  }
  20% {
    transform: translateX(20vw) translateY(69vh) scale(0.6) rotate(8deg);
  }
  40% {
    transform: translateX(40vw) translateY(47vh) scale(0.4) rotate(-38deg);
  }
  60% {
    transform: translateX(60vw) translateY(30vh) scale(0.7) rotate(-13deg);
  }
  80% {
    transform: translateX(80vw) translateY(72vh) scale(0.5) rotate(-2deg);
  }
  100% {
    transform: translateX(110vw) translateY(14vh) scale(0.8) rotate(-3deg);
  }
}
.corona-virus-3-location {
  animation: coronaLocation3 10s linear 2880ms;
}
.corona-virus-3-location [class*="eye"]::after {
  animation-delay: 3850ms;
}

@keyframes coronaLocation3 {
  0% {
    transform: translateX(-10vw) translateY(25vh) scale(0.7) rotate(21deg);
  }
  20% {
    transform: translateX(20vw) translateY(32vh) scale(0.4) rotate(-12deg);
  }
  40% {
    transform: translateX(40vw) translateY(71vh) scale(0.6) rotate(-27deg);
  }
  60% {
    transform: translateX(60vw) translateY(48vh) scale(0.8) rotate(-20deg);
  }
  80% {
    transform: translateX(80vw) translateY(80vh) scale(0.5) rotate(-33deg);
  }
  100% {
    transform: translateX(110vw) translateY(19vh) scale(0.4) rotate(-25deg);
  }
}
.corona-virus-4-location {
  animation: coronaLocation4 10s linear 3840ms;
}
.corona-virus-4-location [class*="eye"]::after {
  animation-delay: 2306ms;
}

@keyframes coronaLocation4 {
  0% {
    transform: translateX(-10vw) translateY(53vh) scale(0.4) rotate(16deg);
  }
  20% {
    transform: translateX(20vw) translateY(4vh) scale(0.6) rotate(28deg);
  }
  40% {
    transform: translateX(40vw) translateY(50vh) scale(0.5) rotate(43deg);
  }
  60% {
    transform: translateX(60vw) translateY(49vh) scale(0.5) rotate(21deg);
  }
  80% {
    transform: translateX(80vw) translateY(36vh) scale(0.6) rotate(-18deg);
  }
  100% {
    transform: translateX(110vw) translateY(41vh) scale(0.5) rotate(10deg);
  }
}
.corona-virus-5-location {
  animation: coronaLocation5 10s linear 4800ms;
}
.corona-virus-5-location [class*="eye"]::after {
  animation-delay: 3185ms;
}

@keyframes coronaLocation5 {
  0% {
    transform: translateX(-10vw) translateY(64vh) scale(0.6) rotate(29deg);
  }
  20% {
    transform: translateX(20vw) translateY(32vh) scale(0.4) rotate(35deg);
  }
  40% {
    transform: translateX(40vw) translateY(9vh) scale(0.6) rotate(41deg);
  }
  60% {
    transform: translateX(60vw) translateY(68vh) scale(0.5) rotate(-16deg);
  }
  80% {
    transform: translateX(80vw) translateY(17vh) scale(0.6) rotate(-21deg);
  }
  100% {
    transform: translateX(110vw) translateY(80vh) scale(0.4) rotate(28deg);
  }
}
.corona-virus-6-location {
  animation: coronaLocation6 10s linear 5760ms;
}
.corona-virus-6-location [class*="eye"]::after {
  animation-delay: 89ms;
}

@keyframes coronaLocation6 {
  0% {
    transform: translateX(-10vw) translateY(20vh) scale(0.6) rotate(4deg);
  }
  20% {
    transform: translateX(20vw) translateY(52vh) scale(0.7) rotate(-19deg);
  }
  40% {
    transform: translateX(40vw) translateY(72vh) scale(0.8) rotate(32deg);
  }
  60% {
    transform: translateX(60vw) translateY(15vh) scale(0.7) rotate(24deg);
  }
  80% {
    transform: translateX(80vw) translateY(22vh) scale(0.6) rotate(1deg);
  }
  100% {
    transform: translateX(110vw) translateY(73vh) scale(0.8) rotate(13deg);
  }
}
.corona-virus-7-location {
  animation: coronaLocation7 10s linear 6720ms;
}
.corona-virus-7-location [class*="eye"]::after {
  animation-delay: 2454ms;
}

@keyframes coronaLocation7 {
  0% {
    transform: translateX(-10vw) translateY(25vh) scale(0.7) rotate(21deg);
  }
  20% {
    transform: translateX(20vw) translateY(36vh) scale(0.6) rotate(-38deg);
  }
  40% {
    transform: translateX(40vw) translateY(29vh) scale(0.7) rotate(-22deg);
  }
  60% {
    transform: translateX(60vw) translateY(45vh) scale(0.8) rotate(10deg);
  }
  80% {
    transform: translateX(80vw) translateY(22vh) scale(0.8) rotate(-8deg);
  }
  100% {
    transform: translateX(110vw) translateY(78vh) scale(0.5) rotate(-38deg);
  }
}
.corona-virus-8-location {
  animation: coronaLocation8 10s linear 7680ms;
}
.corona-virus-8-location [class*="eye"]::after {
  animation-delay: 406ms;
}

@keyframes coronaLocation8 {
  0% {
    transform: translateX(-10vw) translateY(12vh) scale(0.6) rotate(-8deg);
  }
  20% {
    transform: translateX(20vw) translateY(5vh) scale(0.6) rotate(45deg);
  }
  40% {
    transform: translateX(40vw) translateY(73vh) scale(0.6) rotate(0deg);
  }
  60% {
    transform: translateX(60vw) translateY(22vh) scale(0.8) rotate(-34deg);
  }
  80% {
    transform: translateX(80vw) translateY(80vh) scale(0.7) rotate(-8deg);
  }
  100% {
    transform: translateX(110vw) translateY(44vh) scale(0.4) rotate(-2deg);
  }
}
.corona-virus-9-location {
  animation: coronaLocation9 10s linear 8640ms;
}
.corona-virus-9-location [class*="eye"]::after {
  animation-delay: 3183ms;
}

@keyframes coronaLocation9 {
  0% {
    transform: translateX(-10vw) translateY(71vh) scale(0.5) rotate(-44deg);
  }
  20% {
    transform: translateX(20vw) translateY(12vh) scale(0.6) rotate(10deg);
  }
  40% {
    transform: translateX(40vw) translateY(69vh) scale(0.7) rotate(-6deg);
  }
  60% {
    transform: translateX(60vw) translateY(46vh) scale(0.8) rotate(40deg);
  }
  80% {
    transform: translateX(80vw) translateY(69vh) scale(0.8) rotate(-39deg);
  }
  100% {
    transform: translateX(110vw) translateY(43vh) scale(0.7) rotate(10deg);
  }
}
.corona-virus-10-location {
  animation: coronaLocation10 10s linear 9600ms;
}
.corona-virus-10-location [class*="eye"]::after {
  animation-delay: 1459ms;
}

@keyframes coronaLocation10 {
  0% {
    transform: translateX(-10vw) translateY(45vh) scale(0.8) rotate(-26deg);
  }
  20% {
    transform: translateX(20vw) translateY(3vh) scale(0.4) rotate(32deg);
  }
  40% {
    transform: translateX(40vw) translateY(9vh) scale(0.6) rotate(12deg);
  }
  60% {
    transform: translateX(60vw) translateY(58vh) scale(0.7) rotate(9deg);
  }
  80% {
    transform: translateX(80vw) translateY(25vh) scale(0.5) rotate(28deg);
  }
  100% {
    transform: translateX(110vw) translateY(10vh) scale(0.4) rotate(-31deg);
  }
}
.corona-virus-11-location {
  animation: coronaLocation11 10s linear 10560ms;
}
.corona-virus-11-location [class*="eye"]::after {
  animation-delay: 408ms;
}

@keyframes coronaLocation11 {
  0% {
    transform: translateX(-10vw) translateY(5vh) scale(0.7) rotate(9deg);
  }
  20% {
    transform: translateX(20vw) translateY(18vh) scale(0.8) rotate(13deg);
  }
  40% {
    transform: translateX(40vw) translateY(57vh) scale(0.6) rotate(21deg);
  }
  60% {
    transform: translateX(60vw) translateY(19vh) scale(0.8) rotate(29deg);
  }
  80% {
    transform: translateX(80vw) translateY(80vh) scale(0.5) rotate(18deg);
  }
  100% {
    transform: translateX(110vw) translateY(64vh) scale(0.6) rotate(-7deg);
  }
}
.corona-virus-12-location {
  animation: coronaLocation12 10s linear 11520ms;
}
.corona-virus-12-location [class*="eye"]::after {
  animation-delay: 1800ms;
}

@keyframes coronaLocation12 {
  0% {
    transform: translateX(-10vw) translateY(59vh) scale(0.4) rotate(37deg);
  }
  20% {
    transform: translateX(20vw) translateY(80vh) scale(0.5) rotate(-30deg);
  }
  40% {
    transform: translateX(40vw) translateY(72vh) scale(0.4) rotate(33deg);
  }
  60% {
    transform: translateX(60vw) translateY(13vh) scale(0.6) rotate(-5deg);
  }
  80% {
    transform: translateX(80vw) translateY(69vh) scale(0.7) rotate(9deg);
  }
  100% {
    transform: translateX(110vw) translateY(36vh) scale(0.5) rotate(7deg);
  }
}
.corona-virus-13-location {
  animation: coronaLocation13 10s linear 12480ms;
}
.corona-virus-13-location [class*="eye"]::after {
  animation-delay: 446ms;
}

@keyframes coronaLocation13 {
  0% {
    transform: translateX(-10vw) translateY(75vh) scale(0.5) rotate(-30deg);
  }
  20% {
    transform: translateX(20vw) translateY(49vh) scale(0.5) rotate(-38deg);
  }
  40% {
    transform: translateX(40vw) translateY(43vh) scale(0.7) rotate(5deg);
  }
  60% {
    transform: translateX(60vw) translateY(59vh) scale(0.6) rotate(12deg);
  }
  80% {
    transform: translateX(80vw) translateY(74vh) scale(0.6) rotate(18deg);
  }
  100% {
    transform: translateX(110vw) translateY(73vh) scale(0.7) rotate(-3deg);
  }
}
.corona-virus-14-location {
  animation: coronaLocation14 10s linear 13440ms;
}
.corona-virus-14-location [class*="eye"]::after {
  animation-delay: 3915ms;
}

@keyframes coronaLocation14 {
  0% {
    transform: translateX(-10vw) translateY(58vh) scale(0.7) rotate(27deg);
  }
  20% {
    transform: translateX(20vw) translateY(43vh) scale(0.5) rotate(-43deg);
  }
  40% {
    transform: translateX(40vw) translateY(48vh) scale(0.4) rotate(39deg);
  }
  60% {
    transform: translateX(60vw) translateY(15vh) scale(0.8) rotate(-25deg);
  }
  80% {
    transform: translateX(80vw) translateY(29vh) scale(0.8) rotate(40deg);
  }
  100% {
    transform: translateX(110vw) translateY(79vh) scale(0.6) rotate(41deg);
  }
}
.corona-virus-15-location {
  animation: coronaLocation15 10s linear 14400ms;
}
.corona-virus-15-location [class*="eye"]::after {
  animation-delay: 535ms;
}

@keyframes coronaLocation15 {
  0% {
    transform: translateX(-10vw) translateY(66vh) scale(0.6) rotate(-40deg);
  }
  20% {
    transform: translateX(20vw) translateY(14vh) scale(0.8) rotate(-26deg);
  }
  40% {
    transform: translateX(40vw) translateY(39vh) scale(0.6) rotate(-39deg);
  }
  60% {
    transform: translateX(60vw) translateY(51vh) scale(0.7) rotate(30deg);
  }
  80% {
    transform: translateX(80vw) translateY(47vh) scale(0.8) rotate(42deg);
  }
  100% {
    transform: translateX(110vw) translateY(50vh) scale(0.8) rotate(-43deg);
  }
}
.corona-virus-16-location {
  animation: coronaLocation16 10s linear 15360ms;
}
.corona-virus-16-location [class*="eye"]::after {
  animation-delay: 1409ms;
}

@keyframes coronaLocation16 {
  0% {
    transform: translateX(-10vw) translateY(71vh) scale(0.8) rotate(22deg);
  }
  20% {
    transform: translateX(20vw) translateY(2vh) scale(0.7) rotate(20deg);
  }
  40% {
    transform: translateX(40vw) translateY(15vh) scale(0.5) rotate(8deg);
  }
  60% {
    transform: translateX(60vw) translateY(73vh) scale(0.7) rotate(-35deg);
  }
  80% {
    transform: translateX(80vw) translateY(62vh) scale(0.6) rotate(-29deg);
  }
  100% {
    transform: translateX(110vw) translateY(56vh) scale(0.8) rotate(16deg);
  }
}
.corona-virus-17-location {
  animation: coronaLocation17 10s linear 16320ms;
}
.corona-virus-17-location [class*="eye"]::after {
  animation-delay: 553ms;
}

@keyframes coronaLocation17 {
  0% {
    transform: translateX(-10vw) translateY(58vh) scale(0.6) rotate(35deg);
  }
  20% {
    transform: translateX(20vw) translateY(40vh) scale(0.4) rotate(-11deg);
  }
  40% {
    transform: translateX(40vw) translateY(31vh) scale(0.6) rotate(31deg);
  }
  60% {
    transform: translateX(60vw) translateY(66vh) scale(0.6) rotate(14deg);
  }
  80% {
    transform: translateX(80vw) translateY(24vh) scale(0.8) rotate(-10deg);
  }
  100% {
    transform: translateX(110vw) translateY(4vh) scale(0.5) rotate(-22deg);
  }
}
.corona-virus-18-location {
  animation: coronaLocation18 10s linear 17280ms;
}
.corona-virus-18-location [class*="eye"]::after {
  animation-delay: 3477ms;
}

@keyframes coronaLocation18 {
  0% {
    transform: translateX(-10vw) translateY(53vh) scale(0.5) rotate(18deg);
  }
  20% {
    transform: translateX(20vw) translateY(31vh) scale(0.5) rotate(37deg);
  }
  40% {
    transform: translateX(40vw) translateY(69vh) scale(0.7) rotate(32deg);
  }
  60% {
    transform: translateX(60vw) translateY(22vh) scale(0.7) rotate(24deg);
  }
  80% {
    transform: translateX(80vw) translateY(50vh) scale(0.7) rotate(-19deg);
  }
  100% {
    transform: translateX(110vw) translateY(58vh) scale(0.4) rotate(-25deg);
  }
}
.corona-virus-19-location {
  animation: coronaLocation19 10s linear 18240ms;
}
.corona-virus-19-location [class*="eye"]::after {
  animation-delay: 2916ms;
}

@keyframes coronaLocation19 {
  0% {
    transform: translateX(-10vw) translateY(80vh) scale(0.8) rotate(43deg);
  }
  20% {
    transform: translateX(20vw) translateY(78vh) scale(0.7) rotate(-14deg);
  }
  40% {
    transform: translateX(40vw) translateY(70vh) scale(0.8) rotate(-17deg);
  }
  60% {
    transform: translateX(60vw) translateY(41vh) scale(0.4) rotate(6deg);
  }
  80% {
    transform: translateX(80vw) translateY(9vh) scale(0.4) rotate(-7deg);
  }
  100% {
    transform: translateX(110vw) translateY(31vh) scale(0.8) rotate(45deg);
  }
}
.corona-virus-20-location {
  animation: coronaLocation20 10s linear 19200ms;
}
.corona-virus-20-location [class*="eye"]::after {
  animation-delay: 2416ms;
}

@keyframes coronaLocation20 {
  0% {
    transform: translateX(-10vw) translateY(33vh) scale(0.8) rotate(-32deg);
  }
  20% {
    transform: translateX(20vw) translateY(68vh) scale(0.5) rotate(9deg);
  }
  40% {
    transform: translateX(40vw) translateY(51vh) scale(0.7) rotate(23deg);
  }
  60% {
    transform: translateX(60vw) translateY(62vh) scale(0.7) rotate(-23deg);
  }
  80% {
    transform: translateX(80vw) translateY(75vh) scale(0.4) rotate(-42deg);
  }
  100% {
    transform: translateX(110vw) translateY(31vh) scale(0.4) rotate(-40deg);
  }
}
.corona-virus-21-location {
  animation: coronaLocation21 10s linear 20160ms;
}
.corona-virus-21-location [class*="eye"]::after {
  animation-delay: 3578ms;
}

@keyframes coronaLocation21 {
  0% {
    transform: translateX(-10vw) translateY(63vh) scale(0.4) rotate(1deg);
  }
  20% {
    transform: translateX(20vw) translateY(77vh) scale(0.5) rotate(-17deg);
  }
  40% {
    transform: translateX(40vw) translateY(69vh) scale(0.6) rotate(16deg);
  }
  60% {
    transform: translateX(60vw) translateY(32vh) scale(0.5) rotate(0deg);
  }
  80% {
    transform: translateX(80vw) translateY(57vh) scale(0.4) rotate(29deg);
  }
  100% {
    transform: translateX(110vw) translateY(34vh) scale(0.6) rotate(31deg);
  }
}
.corona-virus-22-location {
  animation: coronaLocation22 10s linear 21120ms;
}
.corona-virus-22-location [class*="eye"]::after {
  animation-delay: 3130ms;
}

@keyframes coronaLocation22 {
  0% {
    transform: translateX(-10vw) translateY(79vh) scale(0.8) rotate(-38deg);
  }
  20% {
    transform: translateX(20vw) translateY(42vh) scale(0.4) rotate(29deg);
  }
  40% {
    transform: translateX(40vw) translateY(1vh) scale(0.6) rotate(9deg);
  }
  60% {
    transform: translateX(60vw) translateY(8vh) scale(0.6) rotate(-1deg);
  }
  80% {
    transform: translateX(80vw) translateY(46vh) scale(0.8) rotate(15deg);
  }
  100% {
    transform: translateX(110vw) translateY(21vh) scale(0.6) rotate(-39deg);
  }
}
.corona-virus-23-location {
  animation: coronaLocation23 10s linear 22080ms;
}
.corona-virus-23-location [class*="eye"]::after {
  animation-delay: 2714ms;
}

@keyframes coronaLocation23 {
  0% {
    transform: translateX(-10vw) translateY(35vh) scale(0.8) rotate(13deg);
  }
  20% {
    transform: translateX(20vw) translateY(54vh) scale(0.4) rotate(35deg);
  }
  40% {
    transform: translateX(40vw) translateY(10vh) scale(0.4) rotate(-20deg);
  }
  60% {
    transform: translateX(60vw) translateY(39vh) scale(0.7) rotate(34deg);
  }
  80% {
    transform: translateX(80vw) translateY(14vh) scale(0.8) rotate(-1deg);
  }
  100% {
    transform: translateX(110vw) translateY(75vh) scale(0.5) rotate(-36deg);
  }
}
.corona-virus-24-location {
  animation: coronaLocation24 10s linear 23040ms;
}
.corona-virus-24-location [class*="eye"]::after {
  animation-delay: 1103ms;
}

@keyframes coronaLocation24 {
  0% {
    transform: translateX(-10vw) translateY(33vh) scale(0.4) rotate(-11deg);
  }
  20% {
    transform: translateX(20vw) translateY(33vh) scale(0.8) rotate(-20deg);
  }
  40% {
    transform: translateX(40vw) translateY(77vh) scale(0.8) rotate(-31deg);
  }
  60% {
    transform: translateX(60vw) translateY(15vh) scale(0.7) rotate(-33deg);
  }
  80% {
    transform: translateX(80vw) translateY(26vh) scale(0.7) rotate(27deg);
  }
  100% {
    transform: translateX(110vw) translateY(9vh) scale(0.4) rotate(-34deg);
  }
}
.corona-virus-25-location {
  animation: coronaLocation25 10s linear 24000ms;
}
.corona-virus-25-location [class*="eye"]::after {
  animation-delay: 3420ms;
}

@keyframes coronaLocation25 {
  0% {
    transform: translateX(-10vw) translateY(62vh) scale(0.6) rotate(26deg);
  }
  20% {
    transform: translateX(20vw) translateY(12vh) scale(0.4) rotate(4deg);
  }
  40% {
    transform: translateX(40vw) translateY(69vh) scale(0.5) rotate(-6deg);
  }
  60% {
    transform: translateX(60vw) translateY(18vh) scale(0.8) rotate(-39deg);
  }
  80% {
    transform: translateX(80vw) translateY(20vh) scale(0.4) rotate(-13deg);
  }
  100% {
    transform: translateX(110vw) translateY(1vh) scale(0.6) rotate(38deg);
  }
}
.corona-virus-26-location {
  animation: coronaLocation26 10s linear 24960ms;
}
.corona-virus-26-location [class*="eye"]::after {
  animation-delay: 25ms;
}

@keyframes coronaLocation26 {
  0% {
    transform: translateX(-10vw) translateY(4vh) scale(0.7) rotate(7deg);
  }
  20% {
    transform: translateX(20vw) translateY(74vh) scale(0.8) rotate(41deg);
  }
  40% {
    transform: translateX(40vw) translateY(36vh) scale(0.8) rotate(-10deg);
  }
  60% {
    transform: translateX(60vw) translateY(24vh) scale(0.4) rotate(7deg);
  }
  80% {
    transform: translateX(80vw) translateY(54vh) scale(0.5) rotate(-32deg);
  }
  100% {
    transform: translateX(110vw) translateY(52vh) scale(0.7) rotate(35deg);
  }
}
.corona-virus-27-location {
  animation: coronaLocation27 10s linear 25920ms;
}
.corona-virus-27-location [class*="eye"]::after {
  animation-delay: 2897ms;
}

@keyframes coronaLocation27 {
  0% {
    transform: translateX(-10vw) translateY(2vh) scale(0.6) rotate(-9deg);
  }
  20% {
    transform: translateX(20vw) translateY(33vh) scale(0.6) rotate(-15deg);
  }
  40% {
    transform: translateX(40vw) translateY(58vh) scale(0.5) rotate(35deg);
  }
  60% {
    transform: translateX(60vw) translateY(13vh) scale(0.8) rotate(-39deg);
  }
  80% {
    transform: translateX(80vw) translateY(66vh) scale(0.6) rotate(38deg);
  }
  100% {
    transform: translateX(110vw) translateY(29vh) scale(0.5) rotate(6deg);
  }
}
.corona-virus-28-location {
  animation: coronaLocation28 10s linear 26880ms;
}
.corona-virus-28-location [class*="eye"]::after {
  animation-delay: 683ms;
}

@keyframes coronaLocation28 {
  0% {
    transform: translateX(-10vw) translateY(51vh) scale(0.8) rotate(-18deg);
  }
  20% {
    transform: translateX(20vw) translateY(52vh) scale(0.5) rotate(41deg);
  }
  40% {
    transform: translateX(40vw) translateY(78vh) scale(0.4) rotate(22deg);
  }
  60% {
    transform: translateX(60vw) translateY(2vh) scale(0.5) rotate(-5deg);
  }
  80% {
    transform: translateX(80vw) translateY(28vh) scale(0.8) rotate(6deg);
  }
  100% {
    transform: translateX(110vw) translateY(69vh) scale(0.7) rotate(28deg);
  }
}
.corona-virus-29-location {
  animation: coronaLocation29 10s linear 27840ms;
}
.corona-virus-29-location [class*="eye"]::after {
  animation-delay: 407ms;
}

@keyframes coronaLocation29 {
  0% {
    transform: translateX(-10vw) translateY(30vh) scale(0.4) rotate(15deg);
  }
  20% {
    transform: translateX(20vw) translateY(26vh) scale(0.7) rotate(23deg);
  }
  40% {
    transform: translateX(40vw) translateY(44vh) scale(0.8) rotate(-30deg);
  }
  60% {
    transform: translateX(60vw) translateY(77vh) scale(0.4) rotate(-4deg);
  }
  80% {
    transform: translateX(80vw) translateY(47vh) scale(0.6) rotate(40deg);
  }
  100% {
    transform: translateX(110vw) translateY(42vh) scale(0.8) rotate(-43deg);
  }
}
.corona-virus-30-location {
  animation: coronaLocation30 10s linear 28800ms;
}
.corona-virus-30-location [class*="eye"]::after {
  animation-delay: 492ms;
}

@keyframes coronaLocation30 {
  0% {
    transform: translateX(-10vw) translateY(3vh) scale(0.8) rotate(-38deg);
  }
  20% {
    transform: translateX(20vw) translateY(72vh) scale(0.6) rotate(43deg);
  }
  40% {
    transform: translateX(40vw) translateY(64vh) scale(0.8) rotate(35deg);
  }
  60% {
    transform: translateX(60vw) translateY(76vh) scale(0.8) rotate(-2deg);
  }
  80% {
    transform: translateX(80vw) translateY(55vh) scale(0.5) rotate(-16deg);
  }
  100% {
    transform: translateX(110vw) translateY(77vh) scale(0.8) rotate(-28deg);
  }
}
.corona-virus-31-location {
  animation: coronaLocation31 10s linear 29760ms;
}
.corona-virus-31-location [class*="eye"]::after {
  animation-delay: 3017ms;
}

@keyframes coronaLocation31 {
  0% {
    transform: translateX(-10vw) translateY(61vh) scale(0.7) rotate(-12deg);
  }
  20% {
    transform: translateX(20vw) translateY(31vh) scale(0.8) rotate(13deg);
  }
  40% {
    transform: translateX(40vw) translateY(48vh) scale(0.5) rotate(26deg);
  }
  60% {
    transform: translateX(60vw) translateY(61vh) scale(0.4) rotate(41deg);
  }
  80% {
    transform: translateX(80vw) translateY(72vh) scale(0.4) rotate(-41deg);
  }
  100% {
    transform: translateX(110vw) translateY(74vh) scale(0.5) rotate(21deg);
  }
}
.corona-virus-32-location {
  animation: coronaLocation32 10s linear 30720ms;
}
.corona-virus-32-location [class*="eye"]::after {
  animation-delay: 3276ms;
}

@keyframes coronaLocation32 {
  0% {
    transform: translateX(-10vw) translateY(25vh) scale(0.4) rotate(3deg);
  }
  20% {
    transform: translateX(20vw) translateY(39vh) scale(0.4) rotate(18deg);
  }
  40% {
    transform: translateX(40vw) translateY(16vh) scale(0.7) rotate(0deg);
  }
  60% {
    transform: translateX(60vw) translateY(36vh) scale(0.7) rotate(-37deg);
  }
  80% {
    transform: translateX(80vw) translateY(59vh) scale(0.5) rotate(12deg);
  }
  100% {
    transform: translateX(110vw) translateY(11vh) scale(0.5) rotate(-16deg);
  }
}
.corona-virus-33-location {
  animation: coronaLocation33 10s linear 31680ms;
}
.corona-virus-33-location [class*="eye"]::after {
  animation-delay: 1659ms;
}

@keyframes coronaLocation33 {
  0% {
    transform: translateX(-10vw) translateY(74vh) scale(0.6) rotate(-14deg);
  }
  20% {
    transform: translateX(20vw) translateY(6vh) scale(0.8) rotate(34deg);
  }
  40% {
    transform: translateX(40vw) translateY(21vh) scale(0.7) rotate(-9deg);
  }
  60% {
    transform: translateX(60vw) translateY(38vh) scale(0.6) rotate(-22deg);
  }
  80% {
    transform: translateX(80vw) translateY(68vh) scale(0.7) rotate(2deg);
  }
  100% {
    transform: translateX(110v.........完整代码请登录后点击上方下载按钮下载查看