呼吸动画

下载代码

html

css

分享到微信朋友圈

html

css

.x {
  grid-row: 1/-1;
  grid-column: 1/-1;
  border-radius: 12px;
  -webkit-animation: ease 2s alternate infinite;
          animation: ease 2s alternate infinite;
}
.x:nth-of-type(1) {
  box-shadow: 0 0 0.5vmin rgba(0,0,0,0.1);
  border-radius: 1.2vmin;
  width: 4vmin;
  height: 4vmin;
  background: #ffede6;
  -webkit-animation-name: x-1;
          animation-name: x-1;
  -webkit-animation-delay: 80ms;
          animation-delay: 80ms;
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
  z-index: 99;
}
@-webkit-keyframes x-1 {
  to {
    -webkit-transform: rotate(36deg) scale(0.6);
            transform: rotate(36deg) scale(0.6);
  }
}
@keyframes x-1 {
  to {
    -webkit-transform: rotate(36deg) scale(0.6);
            transform: rotate(36deg) scale(0.6);
  }
}
.x:nth-of-type(2) {
  box-shadow: 0 0 1vmin rgba(0,0,0,0.1);
  border-radius: 1.4vmin;
  width: 8vmin;
  height: 8vmin;
  background: #fedacd;
  -webkit-animation-name: x-2;
          animation-name: x-2;
  -webkit-animation-delay: 160ms;
          animation-delay: 160ms;
  -webkit-transform: rotate(72deg);
          transform: rotate(72deg);
  z-index: 98;
}
@-webkit-keyframes x-2 {
  to {
    -webkit-transform: rotate(72deg) scale(0.6);
            transform: rotate(72deg) scale(0.6);
  }
}
@keyframes x-2 {
  to {
    -webkit-transform: rotate(72deg) scale(0.6);
            transform: rotate(72deg) scale(0.6);
  }
}
.x:nth-of-type(3) {
  box-shadow: 0 0 1.5vmin rgba(0,0,0,0.1);
  border-radius: 1.6vmin;
  width: 12vmin;
  height: 12vmin;
  background: #fdc6b5;
  -webkit-animation-name: x-3;
          animation-name: x-3;
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
  -webkit-transform: rotate(108deg);
          transform: rotate(108deg);
  z-index: 97;
}
@-webkit-keyframes x-3 {
  to {
    -webkit-transform: rotate(108deg) scale(0.6);
            transform: rotate(108deg) scale(0.6);
  }
}
@keyframes x-3 {
  to {
    -webkit-transform: rotate(108deg) scale(0.6);
            transform: rotate(108deg) scale(0.6);
  }
}
.x:nth-of-type(4) {
  box-shadow: 0 0 2vmin rgba(0,0,0,0.1);
  border-radius: 1.8vmin;
  width: 16vmin;
  height: 16vmin;
  background: #fbb09d;
  -webkit-animation-name: x-4;
          animation-name: x-4;
  -webkit-animation-delay: 320ms;
          animation-delay: 320ms;
  -webkit-transform: rotate(144deg);
          transform: rotate(144deg);
  z-index: 96;
}
@-webkit-keyframes x-4 {
  to {
    -webkit-transform: rotate(144deg) scale(0.6);
            transform: rotate(144deg) scale(0.6);
  }
}
@keyframes x-4 {
  to {
    -webkit-transform: rotate(144deg) scale(0.6);
            transform: rotate(144deg) scale(0.6);
  }
}
.x:nth-of-type(5) {
  box-shadow: 0 0 2.5vmin rgba(0,0,0,0.1);
  border-radius: 2vmin;
  width: 20vmin;
  height: 20vmin;
  background: #f99986;
  -webkit-animation-name: x-5;
          animation-name: x-5;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  z-index: 95;
}
@-webkit-keyframes x-5 {
  to {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6);
  }
}
@keyframes x-5 {
  to {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6);
  }
}
.x:nth-of-type(6) {
  box-shadow: 0 0 3vmin rgba(0,0,0,0.1);
  border-radius: 2.2vmin;
  width: 24vmin;
  height: 24vmin;
  background: #f6816f;
  -webkit-animation-name: x-6;
          animation-name: x-6;
  -webkit-animation-delay: 480ms;
          animation-delay: 480ms;
  -webkit-transform: rotate(216deg);
          transform: rotate(216deg);
  z-index: 94;
}
@-webkit-keyframes x-6 {
  to {
    -webkit-transform: rotate(216deg) scale(0.6);
            transform: rotate(216deg) scale(0.6);
  }
}
@keyframes x-6 {
  to {
    -webkit-transform: rotate(216deg) scale(0.6);
            transform: rotate(216deg) scale(0.6);
  }
}
.x:nth-of-type(7) {
  box-shadow: 0 0 3.5vmin rgba(0,0,0,0.1);
  border-radius: 2.4vmin;
  width: 28vmin;
  height: 28vmin;
  background: #f36859;
  -webkit-animation-name: x-7;
          animation-name: x-7;
  -webkit-animation-delay: 560ms;
          animation-delay: 560ms;
  -webkit-transform: rotate(252deg);
          transform: rotate(252deg);
  z-index: 93;
}
@-webkit-keyframes x-7 {
  to {
    -webkit-transform: rotate(252deg) scale(0.6);
            transform: rotate(252deg) scale(0.6);
  }
}
@keyframes x-7 {
  to {
    -webkit-transform: rotate(252deg) scale(0.6);
            transform: rotate(252deg) scale(0.6);
  }
}
.x:nth-of-type(8) {
  box-shadow: 0 0 4vmin rgba(0,0,0,0.1);
  border-radius: 2.6vmin;
  width: 32vmin;
  height: 32vmin;
  background: #ef4f43;
  -webkit-animation-name: x-8;
          animation-name: x-8;
  -webkit-animation-delay: 640ms;
          animation-delay: 640ms;
  -webkit-transform: rotate(288deg);
          transform: rotate(288deg);
  z-index: 92;
}
@-webkit-keyframes x-8 {
  to {
    -webkit-transform: rotate(288deg) scale(0.6);
            transform: rotate(288deg) scale(0.6);
  }
}
@keyframes x-8 {
  to {
    -webkit-transform: rotate(288deg) scale(0.6);
            transform: rotate(288deg) scale(0.6);
  }
}
.x:nth-of-type(9) {
  box-shadow: 0 0 4.5vmin rgba(0,0,0,0.1);
  border-radius: 2.8vmin;
  width: 36vmin;
  height: 36vmin;
  background: #ea342e;
  -webkit-animation-name: x-9;
          animation-name: x-9;
  -webkit-animation-delay: 720ms;
          animation-delay: 720ms;
  -webkit-transform: rotate(324deg);
          transform: rotate(324deg);
  z-index: 91;
}
@-webkit-keyframes x-9 {
  to {
    -webkit-transform: rotate(324deg) scale(0.6);
            transform: rotate(324deg) scale(0.6);
  }
}
@keyframes x-9 {
  to {
    -webkit-transform: rotate(324deg) scale(0.6);
            transform: rotate(324deg) scale(0.6);
  }
}
.x:nth-of-type(10) {
  box-shadow: 0 0 5vmin rgba(0,0,0,0.1);
  border-radius: 3vmin;
  width: 40vmin;
  height: 40vmin;
  background: #e61919;
  -webkit-animation-name: x-10;
          animation-name: x-10;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  z-index: 90;
}
@-webkit-keyframes x-10 {
  to {
    -webkit-transform: rotate(360deg) scale(0.6);
            transform: rotate(360deg) scale(0.6);
  }
}
@keyframes x-10 {
  to {
    -webkit-transform: rotate(360deg) scale(0.6);
            transform: rotate(360deg) scale(0.6);
  }
}
.x:nth-of-type(11) {
  box-shadow: 0 0 5.5vmin rgba(0,0,0,0.1);
  border-radius: 3.2vmin;
  width: 44vmin;
  height: 44vmin;
  background: #cc191f;
  -webkit-animation-name: x-11;
          animation-name: x-11;
  -webkit-animation-delay: 880ms;
          animation-delay: 880ms;
  -webkit-transform: rotate(396deg);
          transform: rotate(396deg);
  z-index: 89;
}
@-webkit-keyframes x-11 {
  to {
    -webkit-transform: rotate(396deg) scale(0.6);
            transform: rotate(396deg) scale(0.6);
  }
}
@keyframes x-11 {
  to {
    -webkit-transform: rotate(396deg) scale(0.6);
            transform: rotate(396deg) scale(0.6);
  }
}
.x:nth-of-type(12) {
  box-shadow: 0 0 6vmin rgba(0,0,0,0.1);
  border-radius: 3.4vmin;
  width: 48vmin;
  height: 48vmin;
  background: #b41823;
  -webkit-animation-name: x-12;
          animation-name: x-12;
  -webkit-animation-delay: 960ms;
          animation-delay: 960ms;
  -webkit-transform: rotate(432deg);
          transform: rotate(432deg);
  z-index: 88;
}
@-webkit-keyframes x-12 {
  to {
    -webkit-transform: rotate(432deg) scale(0.6);
            transform: rotate(432deg) scale(0.6);
  }
}
@keyframes x-12 {
  to {
    -webkit-transform: rotate(432deg) scale(0.6);
            transform: rotate(432deg) scale(0.6);
  }
}
.x:nth-of-type(13) {
  box-shadow: 0 0 6.5vmin rgba(0,0,0,0.1);
  border-radius: 3.6vmin;
  width: 52vmin;
  height: 52vmin;
  background: #9b1724;
  -webkit-animation-name: x-13;
          animation-name: x-13;
  -webkit-animation-delay: 1040ms;
          animation-delay: 1040ms;
  -webkit-transform: rotate(468deg);
          transform: rotate(468deg);
  z-index: 87;
}
@-webkit-keyframes x-13 {
  to {
    -webkit-transform: rotate(468deg) scale(0.6);
            transform: rotate(468deg) scale(0.6);
  }
}
@keyframes x-13 {
  to {
    -webkit-transform: rotate(468deg) scale(0.6);
            transform: rotate(468deg) scale(0.6);
  }
}
.x:nth-of-type(14) {
  box-shadow: 0 0 7vmin rgba(0,0,0,0.1);
  border-radius: 3.8vmin;
  width: 56vmin;
  height: 56vmin;
  background: #841524;
  -webkit-animation-name: x-14;
          animation-name: x-14;
  -webkit-animation-delay: 1120ms;
          animation-delay: 1120ms;
  -webkit-transform: rotate(504deg);
          transform: rotate(504deg);
  z-index: 86;
}
@-webkit-keyframes x-14 {
  to {
    -webkit-transform: rotate(504deg) scale(0.6);
            transform: rotate(504deg) scale(0.6);
  }
}
@keyframes x-14 {
  to {
    -webkit-transform: rotate(504deg) scale(0.6);
            transform: rotate(504deg) scale(0.6);
  }
}
.x:nth-of-type(15) {
  box-shadow: 0 0 7.5vmin rgba(0,0,0,0.1);
  border-radius: 4vmin;
  width: 60vmin;
  height: 60vmin;
  background: #6c1322;
  -webkit-animation-name: x-15;
          animation-name: x-15;
  -webkit-animation-delay: 1200ms;
          animation-delay: 1200ms;
  -webkit-transform: rotate(540deg);
          transform: rotate(540deg);
  z-index: 85;
}
@-webkit-keyframes x-15 {
  to {
    -webkit-transform: rotate(540deg) scale(0.6);
            transform: rotate(540deg) scale(0.6);
  }
}
@keyframes x-15 {
  to {
    -webkit-transform: rotate(540deg) scale(0.6);
            transform: rotate(540deg) scale(0.6);
  }
}
.x:nth-of-type(16) {
  box-shadow: 0 0 8vmin rgba(0,0,0,0.1);
  border-radius: 4.2vmin;
  width: 64vmin;
  height: 64vmin;
  background: #56101e;
  -webkit-animation-name: x-16;
          animation-name: x-16;
  -webkit-animation-delay: 1280ms;
          animation-delay: 1280ms;
  -webkit-transform: rotate(576deg);
          transform: rotate(576deg);
  z-index: 84;
}
@-webkit-keyframes x-16 {
  to {
    -webkit-transform: rotate(576deg) scale(0.6);
            transform: rotate(576deg) scale(0.6);
  }
}
@keyframes x-16 {
  to {
    -webkit-transform: rotate(576deg) scale(0.6);
            transform: rotate(576deg) scale(0.6);
  }
}
.x:nth-of-type(17) {
  box-shadow: 0 0 8.5vmin rgba(0,0,0,0.1);
  border-radius: 4.4vmin;
  width: 68vmin;
  height: 68vmin;
  background: #3f0d19;
  -webkit-animation-name: x-17;
          animation-name: x-17;
  -webkit-animation-delay: 1360ms;
          animation-delay: 1360ms;
  -webkit-transform: rotate(612deg);
          transform: rotate(612deg);
  z-index: 83;
}
@-webkit-keyframes x-17 {
  to {
    -webkit-transform: rotate(612deg) scale(0.6);
            transform: rotate(612deg) scale(0.6);
  }
}
@keyframes x-17 {
  to {
    -webkit-transform: rotate(612deg) scale(0.6);
            transform: rotate(612deg) scale(0.6);
  }
}
.x:nth-of-type(18) {
  box-shadow: 0 0 9vmin rgba(0,0,0,0.1);
  border-radius: 4.6vmin;
  width: 72vmin;
  height: 72vmin;
  background: #2a0912;
  -webkit-animation-name: x-18;
          animation-name: x-18;
  -webkit-animation-delay: 1440ms;
          animation-delay: 1440ms;
  -webkit-transform: rotate(648deg);
          transform: rotate(648deg);
  z-index: 82;
}
@-webkit-keyframes x-18 {
  to {
    -webkit-transform: rotate(648deg) scale(0.6);
            transform: rotate(648deg) scale(0.6);
  }
}
@keyframes x-18 {
  to {
    -webkit-transform: rotate(648deg) scale(0.6);
            transform: rotate(648deg) scale(0.6);
  }
}
.x:nth-of-type(19) {
  box-shadow: 0 0 9.5vmin rgba(0,0,0,0.1);
  border-radius: 4.800000000000001vmin;
  width: 76vmin;
  height: 76vmin;
  background: #15050a;
  -webkit-animation-name: x-19;
          animation-name: x-19;
  -webkit-animation-delay: 1520ms;
          animation-delay: 1520ms;
  -webkit-transform: rotate(684deg);
          transform: rotate(684deg);
  z-index: 81;
}
@-webkit-keyframes x-19 {
  to {
    -webkit-transform: rotate(684deg) scale(0.6);
            transform: rotate(684deg) scale(0.6);
  }
}
@keyframes x-19 {
  to {
    -webkit-transform: rotate(684deg) scale(0.6);
            transform: rotate(684deg) scale(0.6);
  }
}
.x:nth-of-type(20) {
  box-shadow: 0 0 10vmin rgba(0,0,0,0.1);
  border-radius: 5vmin;
  width: 80vmin;
  height: 80vmin;
  background: #000;
  -webkit-animation-name: x-20;
          animation-name: x-20;
  -webkit-animation-delay: 1600ms;
          animation-delay: 1600ms;
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
  z-index: 80;
}
@-webkit-keyframes x-20 {
  to {
    -webkit-transform: rotate(720deg) scale(0.6);
            transform: rotate(720deg) scale(0.6);
  }
}
@keyframes x-20 {
  to {
    -webkit-transform: rotate(720deg) scale(0.6);
            transform: rotate(720deg) scale(0.6);
  }
}
body {
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
  -webkit-perspective: 500px;
          perspective: 500px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg