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-gradi.........完整代码请登录后点击上方下载按钮下载查看