web-animations实现正方体组动画效果-html代码-BFW代码库

web-animations实现正方体组动画效果

代码语言：html

所属分类：动画

代码描述：web-animations实现正方体组动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  height: 100%;
}
body {
  margin: 0;
}

body {
  background-color: #252322;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 95vw;
  margin: 0 auto;
}

animatable-cube {
  margin-left: 10px;
  margin-right: 10px;
}

animatable-cube div {
  height: 100%;
  font-size: 26px;
  line-height: 1;
  color: white;
}

:root {
  --animatable-cube-size: 50px;
  --animatable-cube-transition-duration: 2s;
  --animatable-cube-face-border: 2px solid black;
  --animatable-cube-face-background-size: 600% 100%;
  --animatable-cube-face-animation-duration: 5s;
  --animatable-cube-face-animation-timing-function: ease;
  --animatable-cube-front-face-background: linear-gradient(to right, #1a2a6c, #b21f1f, #fdbb2d);
  --animatable-cube-back-face-background: linear-gradient(to right, #8e2de2, #4a00e0);
  --animatable-cube-left-face-background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
  --animatable-cube-right-face-background: linear-gradient(to right, #200122, #6f0000);
  --animatable-cube-top-face-background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
  --animatable-cube-bottom-face-background: linear-gradient(to right, #780206, #061161);
}

@media screen and (min-width: 500px) {
  body {
    max-width: 80vw;
  }
}

@media screen and (min-width: 800px) {
  body {
    max-width: 70vw;
  }
}

@media screen and (min-width: 1000px) {
  body {
    max-width: 50vw;
  }
}
</style>

</head>
<body translate="no">
<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.1.7/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule src="https://unpkg.com/@proyecto26/animatable-component@1.1.7/dist/animatable-component/animatable-component.js"></script>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="0" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="100" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="200" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="300" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="400" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="500" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay="600" iterations="Infinity">
</animatable-cube>
<animatable-cube autoplay animation="rotate-90-horizontal-bck" duration="1000" delay=.........完整代码请登录后点击上方下载按钮下载查看