body { 
     background-color: #efefef;
     background-image: url(https://images.cnblogs.com/cnblogs_com/2979100039-qq-con/1650464/o_200713102630bz2.jpg);
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
  
    opacity:0.85;
  }

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}
/* 3d旋转样式 */
.cub {
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	left: 3%;
	top: 3.75rem;
       z-index:3;
}

#cube {
	animation: 6s spin linear infinite;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	width: 100%;
}

#cube * {
	display: block;
	height: 2.5rem;
	position: absolute;
	width: 2.5rem;
	cursor: pointer;
}
.cub:hover{
	width: 6.25rem;
	height: 6.25rem;
}
.cub:hover #cube *{
	width: 6.25rem;
	height: 6.25rem;
}

#cube *:before {
	content: '';
	height: 100%;
	position: absolute;
	width: 100%;
}
.cub:hover #back {
	transform: rotateX(180deg) translateZ(5rem);
}

.cub:hover #front {
	transform: rotateY(0deg) translateZ(5rem);
}

.cub:hover #bottom {
	transform: rotateX(-90deg) translateZ(5rem);
}

.cub:hover #left {
	transform: rotateY(-90deg) translateZ(5rem);
}

.cub:hover #right {
	transform: rotateY(90deg) translateZ(5rem);
}

.cub:hover #top {
	transform: rotateX(90deg) translateZ(5rem);
}
/*  */

#back {
	transform: rotateX(180deg) translateZ(1.875rem);
}

#front {
	transform: rotateY(0deg) translateZ(1.875rem);
}

#bottom {
	transform: rotateX(-90deg) translateZ(1.875rem);
}

#left {
	transform: rotateY(-90deg) translateZ(1.875rem);
}

#right {
	transform: rotateY(90deg) translateZ(1.875rem);
}

#top {
	transform: rotateX(90deg) translateZ(1.875rem);
}

@keyframes spin {
	0% {
		transform: translateZ(6.25rem) rotateX(0) rotateY(0deg);
	}

	100% {
		transform: translateZ(6.25rem) rotateX(360deg) rotateY(360deg);
	}
}