css3多米诺骨牌动画特效

最新推荐文章于 2021-09-15 18:34:59 发布
最新推荐文章于 2021-09-15 18:34:59 发布
阅读量395 收藏 2
点赞数
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/112756035
版权

css3绘制多米诺骨牌动画，彩色的多米诺骨牌动画演示特效。喜欢的要试试哦~
在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<div class="container">

  <h1>多米诺</h1>

  <div class="floors">
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor"></div>
  </div>

  <div class="shadows">
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
  </div>

  <div class="dominos">
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
    <div class="domino"><div class="side"></div><div class="front"></div><div class="top"></div></div>
  </div>
</div>
</body>
</html>

css代码

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: "Indie Flower", cursive;
  background-color: #333;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid #fff;
  background-image: linear-gradient(#456, #333 75%, #444 75%, #222);
  perspective: 400px;
  overflow: hidden;
}
.container h1 {
  font-size: 60px;
  font-weight: normal;
  text-align: center;
  padding: 2em 0.5em;
  line-height: 0.75;
}

.floor {
  position: absolute;
  bottom: 0px;
  width: 200px;
  height: 400px;
  background-color: #0003;
  transform: rotateX(90deg);
  transform-origin: bottom;
  -webkit-animation: floors 16s infinite linear;
          animation: floors 16s infinite linear;
}
.floor:nth-child(1) {
  -webkit-animation-delay: -2.31s;
          animation-delay: -2.31s;
}
.floor:nth-child(2) {
  -webkit-animation-delay: -4.31s;
          animation-delay: -4.31s;
}
.floor:nth-child(3) {
  -webkit-animation-delay: -6.31s;
          animation-delay: -6.31s;
}
.floor:nth-child(4) {
  -webkit-animation-delay: -8.31s;
          animation-delay: -8.31s;
}
.floor:nth-child(5) {
  -webkit-animation-delay: -10.31s;
          animation-delay: -10.31s;
}
.floor:nth-child(6) {
  -webkit-animation-delay: -12.31s;
          animation-delay: -12.31s;
}
.floor:nth-child(7) {
  -webkit-animation-delay: -14.31s;
          animation-delay: -14.31s;
}
.floor:nth-child(8) {
  -webkit-animation-delay: -16.31s;
          animation-delay: -16.31s;
}
@-webkit-keyframes floors {
  from {
    left: calc(50% - 1500px);
  }
  to {
    left: calc(50% + 1700px);
  }
}
@keyframes floors {
  from {
    left: calc(50% - 1500px);
  }
  to {
    left: calc(50% + 1700px);
  }
}

.shadow {
  position: absolute;
  bottom: 0px;
  width: 60px;
  height: 400px;
  background-image: radial-gradient(#222, transparent 60%);
  transform: rotateX(90deg) translateX(40px) scaleX(-1);
  transform-origin: bottom left;
  -webkit-animation: shadows 8s infinite linear;
          animation: shadows 8s infinite linear;
}
.shadow:nth-child(1) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.shadow:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.shadow:nth-child(3) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.shadow:nth-child(4) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.shadow:nth-child(5) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.shadow:nth-child(6) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.shadow:nth-child(7) {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.shadow:nth-child(8) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.shadow:nth-child(9) {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
}
.shadow:nth-child(10) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.shadow:nth-child(11) {
  -webkit-animation-delay: -5.5s;
          animation-delay: -5.5s;
}
.shadow:nth-child(12) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.shadow:nth-child(13) {
  -webkit-animation-delay: -6.5s;
          animation-delay: -6.5s;
}
.shadow:nth-child(14) {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.shadow:nth-child(15) {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}
.shadow:nth-child(16) {
  -webkit-animation-delay: -8s;
          animation-delay: -8s;
}
@-webkit-keyframes shadows {
  from {
    left: calc(50% - 700px);
  }
  to {
    left: calc(50% + 900px);
  }
  0%, 43.75% {
    transform: rotateX(90deg) translateX(40px) scaleX(-1);
  }
  100% {
    transform: rotateX(90deg) translateX(40px) scaleX(-7);
  }
}
@keyframes shadows {
  from {
    left: calc(50% - 700px);
  }
  to {
    left: calc(50% + 900px);
  }
  0%, 43.75% {
    transform: rotateX(90deg) translateX(40px) scaleX(-1);
  }
  100% {
    transform: rotateX(90deg) translateX(40px) scaleX(-7);
  }
}

.domino {
  position: absolute;
  bottom: 0px;
  width: 20px;
  height: 400px;
  transform: rotateX(90deg);
  transform-origin: bottom left;
  transform-style: preserve-3d;
  -webkit-animation: domino 8s infinite linear;
          animation: domino 8s infinite linear;
}
.domino:nth-child(1) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.domino:nth-child(1) * {
  position: absolute;
  background-color: #E57373;
}
.domino:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.domino:nth-child(2) * {
  position: absolute;
  background-color: #F06292;
}
.domino:nth-child(3) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.domino:nth-child(3) * {
  position: absolute;
  background-color: #BA68C8;
}
.domino:nth-child(4) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.domino:nth-child(4) * {
  position: absolute;
  background-color: #9575CD;
}
.domino:nth-child(5) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.domino:nth-child(5) * {
  position: absolute;
  background-color: #7986CB;
}
.domino:nth-child(6) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.domino:nth-child(6) * {
  position: absolute;
  background-color: #64B5F6;
}
.domino:nth-child(7) {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.domino:nth-child(7) * {
  position: absolute;
  background-color: #4FC3F7;
}
.domino:nth-child(8) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.domino:nth-child(8) * {
  position: absolute;
  background-color: #4DD0E1;
}
.domino:nth-child(9) {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
}
.domino:nth-child(9) * {
  position: absolute;
  background-color: #4DB6AC;
}
.domino:nth-child(10) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.domino:nth-child(10) * {
  position: absolute;
  background-color: #81C784;
}
.domino:nth-child(11) {
  -webkit-animation-delay: -5.5s;
          animation-delay: -5.5s;
}
.domino:nth-child(11) * {
  position: absolute;
  background-color: #AED581;
}
.domino:nth-child(12) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.domino:nth-child(12) * {
  position: absolute;
  background-color: #DCE775;
}
.domino:nth-child(13) {
  -webkit-animation-delay: -6.5s;
          animation-delay: -6.5s;
}
.domino:nth-child(13) * {
  position: absolute;
  background-color: #FFF176;
}
.domino:nth-child(14) {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.domino:nth-child(14) * {
  position: absolute;
  background-color: #FFB74D;
}
.domino:nth-child(15) {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}
.domino:nth-child(15) * {
  position: absolute;
  background-color: #FFB74D;
}
.domino:nth-child(16) {
  -webkit-animation-delay: -8s;
          animation-delay: -8s;
}
.domino:nth-child(16) * {
  position: absolute;
  background-color: #FF8A65;
}
.domino .side {
  bottom: 100px;
  left: 0;
  width: 20px;
  height: 200px;
  background-image: linear-gradient(45deg, #0005, #fff5);
  transform: rotateX(-90deg);
  transform-origin: bottom;
}
.domino .front {
  bottom: 100px;
  right: 0;
  width: 200px;
  height: 100px;
  background-image: linear-gradient(45deg, #fff5, #0005);
  transform: rotateY(90deg);
  transform-origin: right;
}
.domino .top {
  bottom: 100px;
  left: 0;
  width: 20px;
  height: 100px;
  background-image: linear-gradient(45deg, #fff5, #0005);
  transform: translateZ(200px);
  transform-origin: right;
}
@-webkit-keyframes domino {
  from {
    left: calc(50% - 700px);
  }
  to {
    left: calc(50% + 900px);
  }
  0% {
    z-index: 0;
  }
  43.75% {
    z-index: 32;
  }
  50% {
    z-index: 0;
  }
  100% {
    z-index: 32;
  }
  0%, 43.75% {
    transform: rotateX(90deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(90deg) rotateY(-24deg);
  }
  56.25% {
    transform: rotateX(90deg) rotateY(-45deg);
  }
  62.5% {
    transform: rotateX(90deg) rotateY(-60deg);
  }
  68.75% {
    transform: rotateX(90deg) rotateY(-68.5deg);
  }
  75% {
    transform: rotateX(90deg) rotateY(-73deg);
  }
  81.25% {
    transform: rotateX(90deg) rotateY(-75.5deg);
  }
  87.5% {
    transform: rotateX(90deg) rotateY(-77deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(-78deg);
  }
}
@keyframes domino {
  from {
    left: calc(50% - 700px);
  }
  to {
    left: calc(50% + 900px);
  }
  0% {
    z-index: 0;
  }
  43.75% {
    z-index: 32;
  }
  50% {
    z-index: 0;
  }
  100% {
    z-index: 32;
  }
  0%, 43.75% {
    transform: rotateX(90deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(90deg) rotateY(-24deg);
  }
  56.25% {
    transform: rotateX(90deg) rotateY(-45deg);
  }
  62.5% {
    transform: rotateX(90deg) rotateY(-60deg);
  }
  68.75% {
    transform: rotateX(90deg) rotateY(-68.5deg);
  }
  75% {
    transform: rotateX(90deg) rotateY(-73deg);
  }
  81.25% {
    transform: rotateX(90deg) rotateY(-75.5deg);
  }
  87.5% {
    transform: rotateX(90deg) rotateY(-77deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(-78deg);
  }
}
W Y L
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
力扣1128，等价多米诺骨牌对——python
qq_51718832的博客
01-26 178
题目的意思我们很容易去理解，但是他们还有可能反转才相等，那太麻烦了吧，不如我们直接用map函数对内部的所有小列表排序 newDominoes = map(lambda x:sorted(x),dominoes) 之后我们只需要去重就行了，但是我们注意有一个坑，每有一个重复的出现，对数实际上是加的原来的重复个数，如果原来由两个[1, 2],再出现一个[1, 2]，他们的对数实际上是加了两个，而不是只加一个。 我们的第一个方法肯定会暴力简单的循环，双循环就可以完成了所有，但是两个循环复杂度似乎
【入门】小X放骨牌
xyt842380360的博客
02-16 2710
【入门】小X放骨牌 题目解释： 这道题其实就是一个递推，考试时遇到的话可以从较小的行和列进行推算，如是2*2的，如下图： 可以截两个，但这是偶数的行和偶数的列，现在我们来看偶数的行和奇数的列，如2*3： 我们会发现，这样还是可以排满的，但如果是像3*3这样的奇数行奇数列呢?首先我们都横着排： 可以画3排，然后右边会有一排1*3的空间多出来，那是不是不能再排了呢？其实不然...
CSS3多米诺骨牌动画特效代码
03-20
CSS3多米诺骨牌动画代码，CSS3+JS制作，四种图像比例显示，三种速度选项。
纯css3多米诺骨牌动画特效
07-24
纯css3多米诺骨牌动画特效是一款彩色的多米诺骨牌动画演示特效。
CSS3多米诺骨牌动画代码.zip
07-03
CSS3多米诺骨牌动画代码，CSS3 JS制作，四种图像比例显示，三种速度选项。
"多米诺骨牌"问题的动态规划算法
duguduchong的专栏
11-12 8314
现有n块”多米诺骨牌”s1,s2,s3,...sn水平放成一排,每次骨牌si包含左右两个部分,每个部分赋予一个非负整数值,如下图所示为包含6块骨牌的序列.骨牌可做180度旋转,使得原来在左边的值变到右边,而原来右边的值移到左边,假设不论si如何旋转,L[i]总是存储si左边的值, R[i]总是存储si右边的值, W[i]用于存储si的状态:当L[i] 求:R[1]*L[2]+R[2]*L[3]+R[3]*L[4]+R[4]*L[5]+...++R[n-1]*L[n]的最大值,以及当取得最大值时每个骨牌的状态
多米诺骨牌的第一张
阿朱=行业趋势+开发管理+架构
09-15 395
道生一、一生二、二生三、三生万物。如果你不明确自己的方向，那么任何方向都是对的，那么任何方向也都是错的。找不对多米诺骨牌的第一张，就会：到处都是需求、到处都是问题、每件事都需要下决策做讨论...
面试题-多米诺骨牌
qq_35356190的博客
06-30 884
一行中有N张多米诺骨牌，我们将每张多米诺骨牌垂直竖立。 在开始时，我们同时把一些多米诺骨牌向左或向右推。 每过一秒，倒向左边的多米诺骨牌会推动其左侧相邻的多米诺骨牌。 同样地，倒向右边的多米诺骨牌也会推动竖立在其右侧的相邻多米诺骨牌。 如果同时有多米诺骨牌落在一张垂直竖立的多米诺骨牌的两边，由于受力平衡， 该骨牌仍然保持不变。 就这个问题而言，我们会认为正在下降的多米诺骨牌不会对其它正在下降或已经下降的多米诺骨牌施加额外的力。 给定表示初始状态的字符串 "S" 。如果第 i 张多米诺骨牌..
html5和css3炫酷图片3d翻转多米诺动画特效
12-13
这是一款效果炫酷的html5和css3图片3d翻转多米诺动画特效插件。该插件是为移动设备定制的。该图片3d翻转插件当鼠标滑过图片时，图片变为3d立方体像多米诺骨牌一样跌倒，3d立体效果非常强烈。
4、骨牌铺法
agtvo48266的专栏
03-22 1221
骨牌铺法 有1×n的一个长方形，用一个1×1、1×2和1×3的骨牌铺满方格。例如当n=3时为1×3的方格。此时用1×1、1×2和1×3的骨牌铺满方格，共有四种铺法。如下图： 骨牌铺法 有1×n的一个长方形，用一个1×1、1×2和1×3的骨牌铺满方格。例如当n=3时为1×3的方格。此时用1×1、1×2和1×3的骨牌铺满方格，共有四种铺法。如下...
多米诺骨牌
izhengtl2021的博客
07-04 1347
在课堂上，我们分析了棋盘覆盖问题，同学们也看了我的程序运行的情况，今天我们来看一下另外一个覆盖问题。今天的问题是这样的：用n个2X1的矩形（这种矩形我们以后称之为骨牌或多米诺）覆盖2Xn的棋盘，有多少种不同的覆盖法？ Input 本问题有多组测试数据，对于每一组测试数据，输入只有一行n（意义如上所述，1<=n<=45）。 Output 对于每一组输入，输出也只有一行，即覆盖的方法种数。...
骨牌问题
爱敲代码的小赤佬
10-15 1693
在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格，骨牌的铺放方案有三种,如下图： Input 输入数据由多行组成，每行包含一个整数n,表示该测试实例的长方形方格的规格是2×n (0< n<=50)。 Output 对于每个测试实例，请输出铺放方案的总数，每个实例的输出占一行。 Sample Input 1 3 2 ...
多米诺骨牌 DOMINO
快到碗里来
10-18 1671
【题目描述】 Jzabc对多米诺骨牌有很大的兴趣，然而他的骨牌比较特别，只有黑的和白的。他觉得如果存在连续三个骨牌是同种颜色的，那这个骨牌排列就是不美观的。现在他有N个骨牌要排列，他想知道不美观的排列的个数。他想请你帮忙进行统计不美观排列的个数。 【输入格式】 只有一个正整数，即要排列的骨牌的个数。 【输出格式】 一个数，即不美观的排列的个数。 【输入样例】 4 【输出样例】 6
【SSL】 多米诺骨牌
SSL_WCR
08-22 204
Description Input 输入文件的第一行是一个正整数n(1≤n≤1000)，表示多米诺骨牌数。接下来的n行表示n个多米诺骨牌的点数。每行有两个用空格隔开的正整数，表示多米诺骨牌上下方块中的点数a和b，且1≤a，b≤6。 Output 输出文件仅一行，包含一个整数。表示求得的最小旋转次数。 Sample Input 4 6 1 1 5 1 3 1 2 Sample Output １ 思路 设f[i][j]为前i张骨牌差值为j的最小旋转次数 f[i][j]=min(f[i−1][j−a
Tsinghua OJ 多米诺骨牌(domino)
CSerwangjun的博客
03-18 2151
多米诺骨牌(domino) （domino.c/cpp） 问题描述 　　小牛牛对多米诺骨牌有很大兴趣，然而她的骨牌比较特别，只有黑色和白色的两种。她觉得如果存在连续三个骨牌是同一种颜色，那么这个骨牌排列便是不美观的。现在她有n个骨牌要来排列，她想知道不美观的排列的个数。由于数字较大，数学不好的她不会统计，所以请你来帮忙。希望你帮她求出不美观的排列的个数。 输
html5图片前后翻转,html5和css3炫酷图片3d翻转多米诺动画特效
weixin_35043838的博客
06-04 302
这是一款为移动设备定制的、效果炫酷的html5和css3图片3d翻转多米诺动画特效插件。HTML我们使用html5来制作这款插件。主要通过和来组织代码。Autumn, by Lucien AgasseCSS样式元素将用来制作3D perspective效果。div {perspective: 1000px; width: 33%;margin: 0 auto;margin-top: 3rem;}元...
等价多米诺骨牌对的数量
夏洛克福尔摩斯
07-21 231
给你一个由一些多米诺骨牌组成的列表dominoes。 如果其中某一张多米诺骨牌可以通过旋转 0度或 180 度得到另一张多米诺骨牌，我们就认为这两张牌是等价的。 形式上，dominoes[i] = [a, b]和dominoes[j] = [c, d]等价的前提是a==c且b==d，或是a==d 且b==c。 在0 <= i < j < dominoe...
css3垂直动画特效
最新发布
08-20
CSS3垂直动画特效是指使用CSS3技术实现的一种垂直方向上的动画效果。CSS3提供了一系列的动画特性，如transform、transition、animation等，可以让开发者通过设置属性值来实现各种各样的动画效果。 常见的CSS3垂直...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值