纯css 环绕效果中秋桌面

中秋节

中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间传统节日。中秋节源自对天象的崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。中秋节起源于上古时代，普及于汉代，定型于唐代。中秋节是秋季时令习俗的综合，其所包含的节俗因素，大都有古老的渊源。祭月作为民间过节的重要习俗之一，逐渐演化为赏月、颂月等活动。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。最初"祭月节"的节期是在干支历二十四节气"秋分"这天，后来才调至农历八月十五日。中秋节与春节、清明节、端午节并称为中国四大传统节日。受中华文化的影响，中秋节也是东亚和东南亚一些国家尤其是当地的华人华侨的传统节日。

首先看效果

视频在掘金还是上传不了，可以去我个人博客看

极乐净土

div

html 复制代码

<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

css

css 复制代码

*{
		margin:0;
		padding:0;
	}
	body{
		background: url(./bg.jpg) 0 0 no-repeat; background-size: cover;
		-webkit-perspective: 800;
	}
	li{
		list-style: none;
	}
	.box{
		width:200px;
		height:200px;
		position: relative;
		margin:300px auto;
		-webkit-transform-style:preserve-3d;
		-webkit-transform:rotateX(13deg);
		-webkit-animation:move 5s linear infinite;
	}
	.minbox{
		width:100px;
		height:100px;
		position: absolute;
		left:50px;
		top:50px;
		-webkit-transform-style:preserve-3d;
	}
	.minbox li{
		width:100px;
		height:100px;
		position: absolute;
		left:0;
		top:0;
	}
	.minbox li:nth-child(1){
		background: url(./1.jpg) no-repeat 0 0;
		background-size:100% 100%;
		-webkit-transform:translateZ(50px);
	}
	.minbox li:nth-child(2){
		background: url(./2.jpg) no-repeat 0 0;
		background-size:100% 100%;
		-webkit-transform:rotateX(180deg) translateZ(50px);
	}
	.minbox li:nth-child(3){
		background: url(./3.jpg) no-repeat 0 0;
		background-size:100% 100%;
		-webkit-transform:rotateX(-90deg) translateZ(50px);
	}
	.minbox li:nth-child(4){
		background: url(./4.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateX(90deg) translateZ(50px);
	}
	.minbox li:nth-child(5){
		background: url(./5.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateY(-90deg) translateZ(50px);
	}
	.minbox li:nth-child(6){
		background: url(./6.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateY(90deg) translateZ(50px);
	}
	.maxbox li:nth-child(1){
		background: url(./1.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:translateZ(50px);
	}
	.maxbox li:nth-child(2){
		background: url(./2.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateX(180deg) translateZ(50px);
	}
	.maxbox li:nth-child(3){
		background: url(./3.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateX(-90deg) translateZ(50px);
	}
	.maxbox li:nth-child(4){
		background: url(./4.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateX(90deg) translateZ(50px);
	}
	.maxbox li:nth-child(5){
		background: url(./5.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateY(-90deg) translateZ(50px);
	}
	.maxbox li:nth-child(6){
		background: url(./6.jpg) no-repeat 0 0;background-size:100% 100%;
		-webkit-transform:rotateY(90deg) translateZ(50px);
	}
	.maxbox{
		width: 200px;
		height: 200px;
		position: absolute;
		left: 0;
		top: 0;
		-webkit-transform-style: preserve-3d;
	}
	.maxbox li{
		width: 200px;
		height: 200px;
		background: #fff;
		border:1px solid #ccc;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.2;
		-webkit-transition:all 1s ease;
	}
	.maxbox li:nth-child(1){
		-webkit-transform:translateZ(100px);
	}
	.maxbox li:nth-child(2){
		-webkit-transform:rotateX(180deg) translateZ(100px);
	}
	.maxbox li:nth-child(3){
		-webkit-transform:rotateX(-90deg) translateZ(100px);
	}
	.maxbox li:nth-child(4){
		-webkit-transform:rotateX(90deg) translateZ(100px);
	}
	.maxbox li:nth-child(5){
		-webkit-transform:rotateY(-90deg) translateZ(100px);
	}
	.maxbox li:nth-child(6){
		-webkit-transform:rotateY(90deg) translateZ(100px);
	}
	.box:hover ol li:nth-child(1){
		-webkit-transform:translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(2){
		-webkit-transform:rotateX(180deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(3){
		-webkit-transform:rotateX(-90deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(4){
		-webkit-transform:rotateX(90deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(5){
		-webkit-transform:rotateY(-90deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(6){
		-webkit-transform:rotateY(90deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	@keyframes move{
		0%{
			-webkit-transform: rotateX(13deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(13deg) rotateY(360deg);
		}
	}

写完代码后怎么使用

下载iwall 然后使用打开网页，选择html文件即可

备注

图片从 pixabay 免费下载而来

有问题的可以留言解决