仅使用HTML+CSS制作一个动态简版魔方

最新推荐文章于 2024-05-20 21:21:56 发布
最新推荐文章于 2024-05-20 21:21:56 发布
阅读量664 收藏
点赞数 1
文章标签： html5 html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44488145/article/details/109060628
版权

仅使用HTML+CSS制作一个动态简版魔方.

1.软件使用到HBuilder X .

2.使用到CSS3动画.

…实现效果如下:

在这里插入图片描述

… 其代码如下：
魔方 
	<style type="text/css">
		
		* {
			padding: 0;
			margin: 0;
		}
		html,body {
			width: 100%;
			height: 100%;
			
		}
		
		body {
			perspective: 1000px;
			background-color: #111111;
		}
		
		
		@keyframes mask{
			0%{
				transform:   rotateX(10deg)rotateY(0deg) rotateZ(10deg);
			}
			50% {
				/* transform: translate3d(0px,0px,300px); */
				/* transform:   rotateX(0deg)rotateY(180deg) rotateZ(0deg) translate3d(300px,300px,300px); */
			}
			100%{
				transform:   rotateX(0deg)rotateY(3600deg) rotateZ(0deg);
			}
		}
		
		
		.mofang {
			width: 100%;
			height: 100%;
			background-color: #111111;
			position: relative;
			/* transform-style: preserve-3d; */
			overflow: hidden;
		}
		.mofang_list {
			position: absolute;
			top: 0;
			transform-style: preserve-3d;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80px;
			height: 80px;
			/* background-color: lawngreen; */
			animation: mask 80s linear;
			animation-iteration-count: infinite;
			/* position: relative; */
			transform: rotateX(0deg) rotateY(30deg) rotateZ(20deg);
		}
		.mofang_list>div {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			box-shadow: 0px 0px 5px 1px white;
		}
		.mofang_list>div:nth-child(1) {
			animation-name: mask1;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask1 {
			0%{
				transform: translate3d(0px,0px,120px);
			}
			100%{
				transform: translate3d(0px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(2) {
			animation-name: mask2;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask2 {
			0%{
				transform: translate3d(80px,0px,120px);
			}
			100%{
				transform: translate3d(160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(3) {
			animation-name: mask3;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask3 {
			0%{
				transform: translate3d(-80px,0px,120px);
			}
			100%{
				transform: translate3d(-160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(4) {
			animation-name: mask4;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask4 {
			0%{
				transform: translate3d(-80px,80px,120px);
			}
			100%{
				transform: translate3d(-160px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(5) {
			animation-name: mask5;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask5 {
			0%{
				transform: translate3d(-80px,-80px,120px);
			}
			100%{
				transform: translate3d(-160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(6) {
			animation-name: mask6;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask6 {
			0%{
				transform: translate3d(0px,80px,120px);
			}
			100%{
				transform: translate3d(0px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(7) {
			animation-name: mask7;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask7 {
			0%{
				transform: translate3d(80px,-80px,120px);
			}
			100%{
				transform: translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(8) {
			animation-name: mask8;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask8 {
			0%{
				transform: translate3d(0px,-80px,120px);
			}
			100%{
				transform: translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(9) {
			animation-name: mask9;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask9 {
			0%{
				transform: translate3d(80px,80px,120px);
			}
			100%{
				transform: translate3d(160px,160px,200px);
			}
		}
		
		
		.mofang_list>div:nth-child(10) {
			animation-name: mask10;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask10 {
			0%{
				transform: rotateX(270deg) translate3d(0px,0px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(0px,0px,200px);
			}
		}
		
		
		
		.mofang_list>div:nth-child(11) {
			animation-name: mask11;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask11 {
			0%{
				transform: rotateX(270deg) translate3d(80px,0px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(160px,0px,200px);
			}
		}
		
		
		
		.mofang_list>div:nth-child(12) {
			animation-name: mask12;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask12 {
			0%{
				transform: rotateX(270deg) translate3d(-80px,0px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(-160px,0px,200px);
			}
		}
		
		
		.mofang_list>div:nth-child(13) {
			animation-name: mask13;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask13 {
			0%{
				transform: rotateX(270deg) translate3d(-80px,80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(-160px,160px,200px);
			}
		}
		
		
		.mofang_list>div:nth-child(14) {
			animation-name: mask14;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask14 {
			0%{
				transform: rotateX(270deg) translate3d(-80px,-80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(-160px,-160px,200px);
			}
		}
		
		
		.mofang_list>div:nth-child(15) {
			animation-name: mask15;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask15 {
			0%{
				transform: rotateX(270deg) translate3d(0px,80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(0px,160px,200px);
			}
		}
		.mofang_list>div:nth-child(16) {
			animation-name: mask16;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask16 {
			0%{
				transform: rotateX(270deg) translate3d(80px,-80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(17) {
			animation-name: mask17;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask17 {
			0%{
				transform: rotateX(270deg) translate3d(0px,-80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(18) {
			animation-name: mask18;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask18 {
			0%{
				transform: rotateX(270deg) translate3d(80px,80px,120px);
			}
			100%{
				transform: rotateX(270deg) translate3d(160px,160px,200px);
			}
		}
		
		
		
		
		
		.mofang_list>div:nth-child(19) {
			animation-name: mask19;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask19 {
			0%{
				transform: rotateX(90deg) translate3d(0px,0px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(0px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(20) {
			animation-name: mask20;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask20 {
			0%{
				transform: rotateX(90deg) translate3d(80px,0px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(21) {
			animation-name: mask21;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask21 {
			0%{
				transform: rotateX(90deg) translate3d(-80px,0px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(-160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(22) {
			animation-name: mask22;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask22 {
			0%{
				transform: rotateX(90deg) translate3d(-80px,80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(-160px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(23) {
			animation-name: mask23;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask23 {
			0%{
				transform: rotateX(90deg) translate3d(-80px,-80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(-160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(24) {
			animation-name: mask24;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask24 {
			0%{
				transform: rotateX(90deg) translate3d(0px,80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(0px,160px,200px);
			}
		}
		.mofang_list>div:nth-child(25) {
			animation-name: mask25;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask25 {
			0%{
				transform: rotateX(90deg) translate3d(80px,-80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(26) {
			animation-name: mask26;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask26 {
			0%{
				transform: rotateX(90deg) translate3d(0px,-80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(27) {
			animation-name: mask27;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask27 {
			0%{
				transform: rotateX(90deg) translate3d(80px,80px,120px);
			}
			100%{
				transform: rotateX(90deg) translate3d(160px,160px,200px);
			}
		}
		
		
		
		
		.mofang_list>div:nth-child(28) {
			animation-name: mask28;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask28 {
			0%{
				transform: rotateX(180deg) translate3d(0px,0px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(0px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(29) {
			animation-name: mask29;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask29 {
			0%{
				transform: rotateX(180deg) translate3d(80px,0px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(30) {
			animation-name: mask30;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask30 {
			0%{
				transform: rotateX(180deg) translate3d(-80px,0px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(-160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(31) {
			animation-name: mask31;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask31 {
			0%{
				transform: rotateX(180deg) translate3d(-80px,80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(-160px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(32) {
			animation-name: mask32;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask32 {
			0%{
				transform: rotateX(180deg) translate3d(-80px,-80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(-160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(33) {
			animation-name: mask33;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask33 {
			0%{
				transform: rotateX(180deg) translate3d(0px,80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(0px,160px,200px);
			}
		}
		.mofang_list>div:nth-child(34) {
			animation-name: mask34;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask34 {
			0%{
				transform: rotateX(180deg) translate3d(80px,-80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(35) {
			animation-name: mask35;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask35 {
			0%{
				transform: rotateX(180deg) translate3d(0px,-80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(36) {
			animation-name: mask36;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask36 {
			0%{
				transform: rotateX(180deg) translate3d(80px,80px,120px);
			}
			100%{
				transform: rotateX(180deg) translate3d(160px,160px,200px);
			}
		}
		
		
		
		
		
		
		
		
		.mofang_list>div:nth-child(37) {
			animation-name: mask37;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask37 {
			0%{
				transform: rotateY(90deg) translate3d(0px,0px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(0px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(38) {
			animation-name: mask38;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask38 {
			0%{
				transform: rotateY(90deg) translate3d(80px,0px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(39) {
			animation-name: mask39;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask39 {
			0%{
				transform: rotateY(90deg) translate3d(-80px,0px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(-160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(40) {
			animation-name: mask40;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask40 {
			0%{
				transform: rotateY(90deg) translate3d(-80px,80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(-160px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(41) {
			animation-name: mask41;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask41 {
			0%{
				transform: rotateY(90deg) translate3d(-80px,-80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(-160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(42) {
			animation-name: mask42;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask42 {
			0%{
				transform: rotateY(90deg) translate3d(0px,80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(0px,160px,200px);
			}
		}
		.mofang_list>div:nth-child(43) {
			animation-name: mask43;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask43 {
			0%{
				transform: rotateY(90deg) translate3d(80px,-80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(44) {
			animation-name: mask44;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask44 {
			0%{
				transform: rotateY(90deg) translate3d(0px,-80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(45) {
			animation-name: mask45;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask45 {
			0%{
				transform: rotateY(90deg) translate3d(80px,80px,120px);
			}
			100%{
				transform: rotateY(90deg) translate3d(160px,160px,200px);
			}
		}
		
		
		
		
		
		.mofang_list>div:nth-child(46) {
			animation-name: mask46;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask46 {
			0%{
				transform: rotateY(-90deg) translate3d(0px,0px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(0px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(47) {
			animation-name: mask47;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask47 {
			0%{
				transform: rotateY(-90deg) translate3d(80px,0px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(48) {
			animation-name: mask48;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask48 {
			0%{
				transform: rotateY(-90deg) translate3d(-80px,0px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(-160px,0px,200px);
			}
		}
		
		.mofang_list>div:nth-child(49) {
			animation-name: mask49;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask49 {
			0%{
				transform: rotateY(-90deg) translate3d(-80px,80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(-160px,160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(50) {
			animation-name: mask50;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask50 {
			0%{
				transform: rotateY(-90deg) translate3d(-80px,-80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(-160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(51) {
			animation-name: mask51;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask51 {
			0%{
				transform: rotateY(-90deg) translate3d(0px,80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(0px,160px,200px);
			}
		}
		.mofang_list>div:nth-child(52) {
			animation-name: mask52;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask52 {
			0%{
				transform: rotateY(-90deg) translate3d(80px,-80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(160px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(53) {
			animation-name: mask53;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask53 {
			0%{
				transform: rotateY(-90deg) translate3d(0px,-80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(0px,-160px,200px);
			}
		}
		
		.mofang_list>div:nth-child(54) {
			animation-name: mask54;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		
		@keyframes mask54 {
			0%{
				transform: rotateY(-90deg) translate3d(80px,80px,120px);
			}
			100%{
				transform: rotateY(-90deg) translate3d(160px,160px,200px);
			}
		}
		
		
		
		.mofang .mofang_list>div:nth-child(1) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(2) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(3) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(4) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(5) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(6) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(7) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(8) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(9) {
			width: 100%;
			height: 100%;
			background-color: blue;
			transform: translate3d(80px,80px,120px);
		}
		
		
		
		
		
		
		.mofang .mofang_list>div:nth-child(10) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(11) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(12) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(13) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(14) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(15) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(16) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(17) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(18) {
			width: 100%;
			height: 100%;
			background-color: green;
			transform:rotateX(270deg) translate3d(80px,80px,120px);
		}
		
		
		
		.mofang .mofang_list>div:nth-child(19) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(20) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(21) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(22) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(23) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(24) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(25) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(26) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(27) {
			width: 100%;
			height: 100%;
			background-color: red;
			transform:rotateX(90deg) translate3d(80px,80px,120px);
		}
		
		.mofang .mofang_list>div:nth-child(28) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(29) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(30) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(31) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(32) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(33) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(34) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(35) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(36) {
			width: 100%;
			height: 100%;
			background-color: white;
			transform:rotateY(180deg) translate3d(80px,80px,120px);
		}
		
		
		.mofang .mofang_list>div:nth-child(37) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(38) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(39) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(40) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(41) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(42) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(43) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(44) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(45) {
			width: 100%;
			height: 100%;
			background-color: orange;
			transform:rotateY(90deg) translate3d(80px,80px,120px);
		}
		
		
		.mofang .mofang_list>div:nth-child(46) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(0px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(47) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(48) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(-80px,0px,120px);
		}
		.mofang .mofang_list>div:nth-child(49) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(-80px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(50) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(-80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(51) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(0px,80px,120px);
		}
		.mofang .mofang_list>div:nth-child(52) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(80px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(53) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(0px,-80px,120px);
		}
		.mofang .mofang_list>div:nth-child(54) {
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform:rotateY(-90deg) translate3d(80px,80px,120px);
		}
	</style>
</head>
<body>
	<div class="mofang">
		<div class="mofang_list">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	
</body>
lhhllh.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三阶魔方公式记录
菜鸟成长之路-wei的博客
06-14 7760
第一步: 详见魔方小站视频教程：https://imofang.taobao.com/p/jiaocheng31.htm?spm=a1z10.4-c-s.w5003-14960603961.1.6d4723276NiLJM&amp;scene=taobao_shop 第二步: 完成底面白色作为底层。 视频教程：https://imofang.taobao.com/p/jiaocheng...
html+css+js制作的一个动态的新年贺卡
10-03
该代码是http://blog.csdn.net/qq_29656961/article/details/78155792博客里面的代码，代码里面有要用到的图片资源和音乐资源。
通过html+css+js制作一个简单的登录页面
09-26
这是通过html+css+js制作的一个简单的登录页面。 适合想学习前端开发的小白。 可以抖音搜索“汤圆的家”，抖音号为122355808，去观看教学视频。 也可以在哔哩哔哩搜索“web-lyh”观看教学视频。
SSM毕设项目魔方教学网站k53i6（java+VUE+Mybatis+Maven+Mysql）
南方计算机程序
10-10 123
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。2. 前端：vue+css+javascript+jQuery+easyUI+highcharts。SSM毕设项目魔方教学网站k53i6（java+VUE+Mybatis+Maven+Mysql）
HTML 动画、3D学习之制作魔方练习
m0_58467412的博客
09-13 878
魔方成果截图 动画效果部分截图 整体思路 1.创建一个父盒子，里面包含6个子盒子，用来当魔方的六个面，设置魔方的宽和高，可以在父盒子中设置，子盒子继承或者在子盒子中独立设置，但是比较麻烦。 2.设置6个子盒子的颜色并移动6个子盒子到对应的位置，这一步是制作魔方的关键，也是难点。移动子盒子时，首先要搞明白3D移动旋转的中心点在哪里，这才能够准确移动每个子盒子去当魔方的6个面，没有设置中心点，默认为子盒子的中心，也可以设置transfrom-origin更改中...
【拼图】拼图游戏-微信小程序开发流程详解
TA远方
03-06 3031
还记得小时候玩过的经典拼图游戏吗，上小学时，在路边摊用买个玩具，是一个正方形盒子形状，里面装的是图片分割成的很多块，还差一块，怎么描述好呢，和魔方玩具差不多，有没有听说叫二维的魔方，这里用小程序把它实现，有感兴趣的同学可以来看看
html、body宽高都是100%，body里面一个div设置margin-top，body却跑下来了
weixin_42017221的博客
02-11 376
给body设置一个上边框，跟背景颜色一致，然后设置其盒子模型为border-box就应该可以了。
css 设置页面与屏幕同样高度
qq_30738155的博客
06-14 4644
因为html默认height为0 所以如果要设置页面与屏幕同高，就要设置为height:100%，然后再将body的height也设置100% html,body{ height:100% } 例子： html{ height: 100%; } body{ height: 100%; width: 100%; margin: 0; padding: 0; } .father{ height: 100%; width: 100%;
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6319
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
三阶魔方的公式图纸_厉害！3.47秒复原三阶魔方 世界冠军杜宇生西安教你如何玩好魔方...
weixin_33410914的博客
11-24 2800
不少人喜欢玩魔方，感受小小的魔方在手指间快速翻转、神奇炫动。有这样一位魔方高手，他完成三阶魔方，最快速度只要3.47秒。这位魔方高手，正是三阶魔方领域的世界冠军杜宇生。今年20岁的杜宇生，2014年上高一时才开始接触魔方，通过观看网络视频，慢慢练习，一年之后，他便成为了三阶魔方的黑龙江省冠军，从此他便开始参加全国性比赛，并在他上大二时，成功打破世界吉尼斯纪录。杜宇生说，魔方发明以来，基本上世界纪录...
魔方cfop公式软件_易烊千玺弟弟7岁破魔方世界纪录，记忆力和毅力惊人
weixin_39965490的博客
10-22 397
粉丝们都知道易烊千玺有个弟弟，弟弟的小名叫楠楠，原来易烊千玺的弟弟易烊昱华，在他7岁282天的时候，实现了他的冠军梦想，成功挑战了世界记录，经世界记录认证机构(WRCA)权威审核，易烊昱华成功创造“最小年龄连续盲拧还原2个二阶魔方的世界记录”，真是一个高颜值的小神童，祝贺!大家对楠楠的印象只是千玺的弟弟，也曾参加过一些少儿活动，本以为是妈妈带着弟弟出来锻炼勇气，没想到私下的楠楠小朋友早已...
制作一个简单HTML宠物猫网页（HTML+CSS）
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
制作一个简单HTML西安旅游网页(HTML+CSS)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
用HTML+CSS做一个漂亮简单的音乐网站
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HBuilder打包网址成APP应用
weixin_49463731的博客
10-09 208
HBuilder打包网址成APP应用
二乘二（二阶）魔方教程，看完教程拼不出来我给你钱！
热门推荐
DATA8866的博客
07-04 7万+
众所周知，初学者玩魔方就是“背公式”。二阶魔方的公式相比于三阶魔方的公式少了几个，那么，到底几个公式呢？？我告诉你……两个就够了，这两个公式熟练了可以保证在50秒以内，信不信？往下看 图1是一个拼好了的二阶魔方的样子，很酷对不对？（其实我没感觉有多酷，您捧个场就当很酷吧） 图1 一些基础知识： 1、二阶魔方类似于三阶魔方，同样有6个面（为啥总是和三阶魔方比呢，因为三阶魔方算是市面上最常见...
【html5】01-了解HTML5
m0_68467925的博客
05-17 627
了解HTML5；引入HTML5目的；HTML5新特性；优缺点
520表白html5爱心代码
最新发布
youyouxiong的博客
05-20 1733
在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。这个示例创建了一个简单的表白页面，其中包含一个动态的爱心和文字。你可以根据自己的需求调整样式和动画效果，以创建一个更加个性化的表白页面。的动画，它会使爱心按照一定的时间间隔进行缩放，产生跳动的效果。类定义了表白文字的样式，包括它的位置、颜色和字体大小。类定义了爱心的样式，包括它的形状和大小。伪元素用于创建爱心的两个部分，并使用。在这个示例中，我们使用了CSS3的。属性来旋转它们，形成爱心的形状。
【博主推荐】HTML5实现520表白、情人节表白模板源码
xcLeigh
05-17 1481
HTML5实现520表白、情人节表白模板源码，520告白程序，情人节表白程序，html爱情表白，html记事本，html表白日记，html书中的爱情，html爱情日记，为爱打造属于自己的爱情小屋，实现书本翻页效果，写上自己的爱情表白日记，每一帧记录彼此的甜蜜瞬间，每一帧都是彼此为爱付出的幸福。背景夜空下的萤火虫，诺言的背景音乐，漂浮的爱情誓言文字，独一份的浪漫，快来为你那个他（她），建立属于自己的爱情纪念册。代码上手简单，代码独立，可以直接使用。也可直接预览效果。
使用html+css制作一个文件下载页面
06-12
好的，以下是一个简单的文件下载页面的HTML和CSS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>文件下载</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>文件下载</h1> <p>请点击以下链接下载文件：</p> <a href="file.zip" download>文件名.zip</a> </div> </body> </html> ``` CSS代码： ```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { width: 80%; margin: 0 auto; text-align: center; } h1 { margin-top: 50px; } a { display: block; margin: 50px auto; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; transition: all 0.3s ease-in-out; } a:hover { background-color: #0062cc; } ``` 以上代码实现了一个简单的文件下载页面，包括一个标题、一段说明文字和一个下载链接。你可以将`file.zip`替换为你想要提供下载的文件名，然后将该文件放在与HTML文件相同的目录下。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值