CSS3多米諾骨牌動畫代碼

昵稱48806104 2017-11-09

展開全文

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

<head>

<title>CSS3多米諾骨牌動畫</title>

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

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

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>

</body>

</html>

本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導購買等信息，謹防詐騙,。如發(fā)現(xiàn)有害或侵權內(nèi)容,，請點擊一鍵舉報。

轉藏分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自：昵稱48806104 > 《文件夾1》

舉報/認領

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

昵稱48806104

關注對話

TA的最新館藏

CSS3多米諾骨牌動畫代碼
jQuery點擊小圖控制大圖切換代碼
CSS3倒計時警報燈樣式代碼
jQuery圖片篩選過濾器插件
jQuery經(jīng)過圖片高亮手風琴代碼
jQuery城市選擇單選多選代碼

喜歡該文的人也喜歡更多

熱門閱讀換一換

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

CSS3多米諾骨牌動畫代碼