CSS3 三维球体缩放动画

3d balls

ball,3d

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2085
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
  min-height: 100%; }

body {
  background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 30%, #d1d1d1 51%, #fefefe 100%) no-repeat; }

#circle-1 {
  width: 200px;
  height: 200px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 20px;
  left: 30px;
  animation: blur 10s infinite;
  -webkit-animation: blur 10s infinite; }

#circle-2 {
  width: 350px;
  height: 350px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 250px;
  left: 250px;
  animation: blur-2 10s infinite; 
  -webkit-animation: blur-2 10s infinite; }

#circle-3 {
  width: 100px;
  height: 100px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 120px;
  left: 500px;
  animation: blur-3 10s infinite; 
  -webkit-animation: blur-3 10s infinite; }

#circle-4 {
  width: 200px;
  height: 200px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 150px;
  left: 700px;
  animation: blur-4 10s infinite; 
  -webkit-animation: blur-4 10s infinite; }

@keyframes blur {
  0%, 100% {
    filter: blur(0px);
    background-color: whitesmoke;
    transform: translate(50px, 20px); }

20% {
    filter: blur(3px); }

50% {
    filter: blur(15px);
    background-color: #e8e8e8;
    transform: scale(0.5); } }

@keyframes blur-2 {
  0%, 100% {
    filter: blur(16px);
    transform: scale(0.9);
    background-color: #e8e8e8;
    transform: translate(170px, -40px); }

50% {
    filter: blur(0px);
    transform: scale(0.7);
    background-color: whitesmoke; } }

@keyframes blur-3 {
  0%, 100% {
    filter: blur(0px);
    background-color: whitesmoke;
    transform: translate(-50px, 20px); }

20% {
    filter: blur(1px); }

50% {
    filter: blur(3px);
    transform: scale(0.7);
    background-color: #e8e8e8; } }

@keyframes blur-4 {
  0%, 100% {
    filter: blur(9px);
    transform: scale(0.5);
    background-color: #e8e8e8; }

50% {
    filter: blur(0px);
    transform: scale(0.9);
    background-color: whitesmoke;
    transform: translate(-50px, 0); } }

@-webkit-keyframes blur {
  0%, 100% {
    filter: blur(0px);
    background-color: whitesmoke;
    -webkit-transform: translate(50px, 20px); }

20% {
    filter: blur(3px); }

50% {
    filter: blur(15px);
    background-color: #e8e8e8;
    -webkit-transform: scale(0.5); } }

@-webkit-keyframes blur-2 {
  0%, 100% {
    filter: blur(16px);
    -webkit-transform: scale(0.9);
    background-color: #e8e8e8;
    -webkit-transform: translate(170px, -40px); }

50% {
    filter: blur(0px);
    -webkit-transform: scale(0.7);
    background-color: whitesmoke; } }

@-webkit-keyframes blur-3 {
  0%, 100% {
    filter: blur(0px);
    background-color: whitesmoke;
    -webkit-transform: translate(-50px, 20px); }

20% {
    filter: blur(1px); }

50% {
    filter: blur(3px);
    -webkit-transform: scale(0.7);
    background-color: #e8e8e8; } }

@-webkit-keyframes blur-4 {
  0%, 100% {
    filter: blur(9px);
    -webkit-transform: scale(0.5);
    background-color: #e8e8e8; }

50% {
    filter: blur(0px);
    -webkit-transform: scale(0.9);
    background-color: whitesmoke;
    -webkit-transform: translate(-50px, 0); } }

HTML

3d balls

ball,3d

编辑器支持Emmet

快捷键

3d balls

ball,3d

使用HTML5 Canvas 2D实现的三维空间烟花绽放动画

使用CSS3 SVG和JS实现的交互式火球动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：