css实现细胞核裂变复制动画效果代码-html代码-BFW代码库

css实现细胞核裂变复制动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现细胞核裂变复制动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  height: 100vh;
  margin: 0;
}

.content {
  width: 100vw;
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(rgb(59 10 225), #000000);
}

.cellule {
  border-radius: 70% 50% 65% 50%;
  box-shadow: 0 20px 30px rgb(0 0 0 / 20%), inset 0px 10px 30px 5px #2e47f8;
  height: 40vmin;
  position: absolute;
  width: 40vmin;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cellule:after {
  border-radius: 70% 50% 65% 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  box-shadow: inset 0 20px 30px rgb(255 255 255 / 15%);
  content: "";
  height: 100%;
  left: 0px;
  position: absolute;
  width: 100%;
  opacity: 0.35;
}

.core {
  border-radius: 50% 65% 50% 70%;
  box-shadow: 0 20px 30px rgb(0 0 0 / 20%),
    inset 0px 10px 30px 5px rgb(0 23 148), 0 0 25px -5px #10a2fd;
  height: 12vmin;
  width: 12vmin;
  position: absolute;
  background: radial-gradient(#1e76fa, #03c9fe);
  border: 1px solid #2071fa;
  animation: spincore1 20s 0s linear infinite;
}

.cellule:nth-child(1) {
  animation: mitosis1 6s 0s 1, moving1 5s 6s ease-in-out infinite alternate;
  transform: translate(-19vmin, -19vmin) rotate(199deg);
}
.cellule:nth-child(2) {
  animation: mitosis2 6.2s 0s 1, moving2 4.5s 6s ease-in-out infinite alternate;
  transform: translate(19vmin, 19vmin) rotate(50deg);
}
.cellule:nth-child(3) {
  animation: mitosis3 6s 0s 1, moving3 6s 6s ease-in-out infinite alternate;
  transform: translate(-19vmin, 19vmin) rotate(270deg);
}
.cellule:nth-child(4) {
  animation: mitosis4 6.2s 0s 1, moving4 5.5s 6s ease-in-out infinite alternate;
  transform: translate(22vmin, -19vmin) rotate(-150deg);
}

.cellule:nth-child(odd) .core {
  animation: spincore2 22s 0s linear infinite;
}

/*** KEYFRAMES ***/

@keyframes mitosis1 {
  0% {
    transform: translate(0, 0);
  }
  16.666% {
    transform: translate(0, 0);
    filter: blur(0px);
  }
  33.333% {
    filter: blur(2px);
  }
  50% {
    transform: translate(-19vmin, -1vmin) rotate(115deg);
    filter: blur(0px);
  }
  66.666% {
    transform: translate(-19vmin, -1vmin) rotate(110deg);
    filter: blur(0px);
  }
  83.333% {
    filter: blur(1px);
  }
  100% {
    transform: translate(-19vmin, -19vmin) rotate(199deg);
    filter: blur(0px);
  }
}

@keyframes mitosis2 {
  0% {
    transform: translate(0, 0);
  }
  16.666% {
    transform: translate(0, 0);
    filter: blur(0px);
  }
  33.333% {
    filter: blur(2px);
  }
  50% {
    transform:.........完整代码请登录后点击上方下载按钮下载查看