logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

CSS3多米诺骨牌动画代码

 昵称48806104 2017-11-09

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3多米诺骨牌动画</title>

 

<style type="text/css">

@import url("https://www./css?family=Roboto:300,400");

:root {

  --animation-duration: .5s;

}

 

html, body {

  height: 100%;

  min-height: 100%;

}

 

body {

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Roboto', sans-serif;

  font-weight: 300;

  background: linear-gradient(to bottom right, #24527A, #24527A);

  color: #fff;

}

 

figure {

  margin: 0;

}

 

h3 {

  font-weight: 300;

}

 

.attribution {

  position: fixed;

  bottom: 0;

  right: 0;

  color: #fff;

  font-size: 12px;

  padding: 5px;

}

.attribution a {

  color: #ff4470;

}

 

.settings {

  margin-right: 1rem;

  width: 100px;

}

.settings:before {

  content: var(--animation-duration);

}

.settings button {

  display: inline-block;

  margin-bottom: .5rem;

  margin-right: .5rem;

  background: #fff;

  border: none;

  width: 40px;

  height: 30px;

  font-size: .8rem;

  color: #fff;

  background: #ff4470;

  border-radius: 2px;

  cursor: pointer;

  outline: none;

}

.settings button.is-active {

  background: #fff;

  color: #ff4470;

}

 

.current {

  padding: 1rem;

  background: rgba(255, 255, 255, 0.2);

}

.current h3 {

  margin-top: 0;

}

.current__value {

  width: 49%;

  display: inline-block;

}

.current__value:after {

  content: attr(data-value);

}

 

.container {

  --scale: 1;

  width: 350px;

  height: 300px;

  overflow: hidden;

  background: #ff4470;

  transform: scale(var(--scale));

  transition: transform .4s ease-in-out;

}

 

.stage {

  top: -225px;

  left: -150px;

  position: relative;

  transform: rotate3d(6, -3, 6.2, 81deg);

  transform-style: preserve-3d;

  transform-origin: 0 0;

  animation: moveStage var(--animation-duration) linear infinite;

}

 

.domino {

  transform: rotateY(0deg);

  transform-style: preserve-3d;

  transition: transform .2s;

}

.domino:nth-child(1) {

  position: absolute;

  left: 90px;

}

.domino:nth-child(2) {

  position: absolute;

  left: 180px;

}

.domino:nth-child(3) {

  position: absolute;

  left: 270px;

}

.domino:nth-child(4) {

  position: absolute;

  left: 360px;

}

.domino:nth-child(5) {

  position: absolute;

  left: 450px;

}

.domino:nth-child(6) {

  position: absolute;

  left: 540px;

}

.domino:nth-child(7) {

  position: absolute;

  left: 630px;

}

.domino:nth-child(8) {

  position: absolute;

  left: 720px;

}

.domino:nth-child(9) {

  position: absolute;

  left: 810px;

}

.domino:nth-child(10) {

  position: absolute;

  left: 900px;

}

.domino:nth-child(6) .domino__front:after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 47%;

  background: rgba(0, 0, 0, 0.07);

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  transform: scale(1, 0);

  transform-origin: 100% 100%;

  animation: var(--animation-duration) fallShadow linear infinite;

}

.domino:nth-child(7) {

  animation: fall var(--animation-duration) linear infinite;

}

.domino:nth-child(7) .domino__front {

  animation: fallFrontBg var(--animation-duration) linear infinite;

}

.domino:nth-child(7) .domino__front:after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 35%;

  background: rgba(0, 0, 0, 0.07);

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

}

.domino:nth-child(7) .domino__shadow {

  animation: shadowRotate var(--animation-duration) linear infinite;

}

.domino:nth-child(8), .domino:nth-child(9), .domino:nth-child(10) {

  transform: rotateY(-60deg) translate3d(-70px, 30px, -100px);

}

.domino:nth-child(8) .domino__front, .domino:nth-child(9) .domino__front, .domino:nth-child(10) .domino__front {

  background: #fff;

}

.domino:nth-child(8) .domino__front:after, .domino:nth-child(9) .domino__front:after, .domino:nth-child(10) .domino__front:after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 35%;

  background: rgba(0, 0, 0, 0.07);

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  transform: scale(1, 1);

  transform-origin: 100% 100%;

}

.domino:nth-child(8) .domino__shadow, .domino:nth-child(9) .domino__shadow, .domino:nth-child(10) .domino__shadow {

  transform: rotateY(60deg) translate3d(-25px, -25px, 0px);

}

 

.domino figure {

  display: block;

  position: absolute;

  font-size: 90px;

  text-align: center;

  font-weight: bold;

  color: white;

  backface-visibility: hidden;

}

 

.domino__top,

.domino__bottom {

  width: 15px;

  height: 50px;

}

 

.domino__front {

  position: relative;

  width: 50px;

  height: 100px;

  left: 84px;

}

 

.domino__left {

  width: 15px;

  height: 100px;

  top: 0;

}

 

.domino__shadow {

  width: 1px;

  height: 50px;

  background: rgba(0, 0, 0, 0.228);

  border-radius: 10px;

  box-shadow: 0 0 77px 10px rgba(0, 0, 0, 0.8);

}

 

.domino__top {

  background: #fff;

}

 

.domino__front {

  background: #e7f6ff;

}

 

.domino__left {

  background: #9bdaff;

}

 

.domino__bottom {

  background: #65c6ff;

}

 

.domino__top {

  transform: translate3d(125px, 25px, 25px);

}

 

.domino__bottom {

  transform: rotateX(180deg) translate3d(125px, -25px, 75px);

}

 

.domino__front {

  transform: rotateY(-90deg) rotateX(180deg) rotateZ(90deg) translate3d(0px, 25px, 30px);

}

 

.domino__left {

  transform: rotateX(-90deg) translate3d(125px, 25px, 25px);

}

 

.domino__shadow {

  transform: translate3d(125px, 25px, -75px);

}

 

@keyframes moveStage {

  0% {

    transform: rotate3d(6, -3, 6.2, 81deg) translate3d(0, 0, 0);

  }

  100% {

    transform: rotate3d(6, -3, 6.2, 81deg) translate3d(90px, 0, 0);

  }

}

@keyframes fall {

  0% {

    transform: rotateY(0deg) translate3d(0, 0, 0);

  }

  100% {

    transform: rotateY(-60deg) translate3d(-70px, 30px, -100px);

  }

}

@keyframes fallFrontBg {

  0% {

    background: #e7f6ff;

  }

  100% {

    background: #fff;

  }

}

@keyframes fallShadow {

  0% {

    transform: scale(1, 0);

  }

  74% {

    transform: scale(1, 1);

  }

  100% {

    transform: scale(1, 1);

  }

}

@keyframes shadowRotate {

  0% {

    transform: rotateY(0deg) translate3d(125px, 25px, -75px);

  }

  100% {

    transform: rotateY(60deg) translate3d(-25px, -25px, 0px);

  }

}

</style>

 

<div class="settings">

  <h3>比例</h3>

  <button class="settings__scale is-active" onclick="changeScale(1, this)">1</button>

  <button class="settings__scale" onclick="changeScale(.5, this)">.5</button>

  <button class="settings__scale" onclick="changeScale(.25, this)">.25</button>

  <button class="settings__scale" onclick="changeScale(.1, this)">.1</button>

 

  <h3>速度</h3>

  <button class="settings__duration" onclick="changeDuration('.7s', this)">.7s</button>

  <button class="settings__duration is-active" onclick="changeDuration('.5s', this)">.5s</button>

  <button class="settings__duration" onclick="changeDuration('.3s', this)">.3s</button>

</div>

 

<div>

  <div id="container" class="container">

    <section class="stage">

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

      <div class="domino">

        <figure class="domino__top"></figure>

        <figure class="domino__front"></figure>

        <figure class="domino__bottom"></figure>

        <figure class="domino__left"></figure>

        <figure class="domino__shadow"></figure>

      </div>

    </section>

  </div>

</div>

 

 

<script type="text/javascript">      

const container = document.getElementById('container');

const scaleButtons = document.getElementsByClassName('settings__scale');

const durationButtons = document.getElementsByClassName('settings__duration');

 

function changeScale(scale, el) {

  removeActive(scaleButtons);

  el.classList.add('is-active');

  container.style.setProperty('--scale', scale);

}

 

function changeDuration(duration, el) {

  removeActive(durationButtons);

  el.classList.add('is-active');

  document.documentElement.style.setProperty('--animation-duration', duration);

}

 

function removeActive(elements) {

  [].forEach.call(elements, el => el.classList.remove('is-active'));

}</script>

<div style="text-align:center;">

<p>更多源码：<a href="http://down./" target="_blank"> </a></p>

</div>

</body>

</html>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称48806104 > 《文件夹1》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多