噜噜噜噜噜,天天射天天操天天干

CSS3多米諾骨牌動畫代碼

昵稱48806104 >《文件夾1》

2017.11.09

關(guān)注

<!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>

@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>

<div>

</div>

<figureclass="domino__shadow"></figure>

</div>

</div>

<figureclass="domino__left"></figure>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</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;">

</div>

</body>

</html>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

CSS動畫實例：Loading加載動畫效果（三）

【程序員的浪漫】圣誕節(jié)到了，何不送給Ta一份程序員的浪漫

讓等待變爽快!用CSS3創(chuàng)建預(yù)加載動畫集

HTML5 3D旋轉(zhuǎn)圖片相冊

優(yōu)雅WEB：三步制作CSS3扁平化小時鐘

3d正方體旋轉(zhuǎn)相冊

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区