<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS3多米诺骨牌动画</title>
<style type="text/css">
@import url("https://www.shaxiangift.com/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>
<figureclass="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>
<figureclass="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>
<scripttype="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>
<divstyle="text-align:center;">
<p>更多源码：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服
