手把手教你用纯 CSS 码出一份来自程序员的浪漫礼盒

框架搭建好了，我们现在来完善一下正方体。

/*%20核心骨架%20*/
.skeleton{
	width:300px;
	height:300px;
	margin:200px%20auto;
	perspective:1200px;
	transform:translateZ(0px);
}
/*外部立方体核心%20*/
.cube{
	position:relative;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	animation-name:cube;
%20%20%20%20%20%20%20%20animation-duration:3s;
	animation-iteration-count:infinite;
	transition-timing-function:linear;
}
/*外部立方体每个面共同样式%20%20*/
.common{
%20%20%20%20%20%20%20%20position:absolute;
	width:100%;
	height:100%;
	background-image:url('https://s1.ax1x.com/2023/02/12/pS5gd78.jpg');
	background-size:cover;
	border:2px solid #e66d50;
        transition-duration:3s;
        transition-delay:1s;
}
/*外部立方体上（面）*/
.top{
	top:-150px;
	left:0;
	transform:rotateX(90deg);
}
/*外部立方体下（面）*/
.bottom{
	top:150px;
	left:0;
	transform:rotateX(-90deg);
}
/*外部立方体左（面）*/
.left{
	top:0;
	left:-150px;
	transform:rotateY(-90deg);
}
/*外部立方体右（面）*/
.right{
	top:0;
	left:150px;
	transform:rotateY(90deg);
}
/* 外部立方体前（面） */
.front{
	transform:translateZ(150px);
}
/*外部立方体后（面） */
.behind{
	transform:translateZ(-150px);
}

这就是大正方体的实现，将各个面的公共背景图去掉就是下图这个样子。

我们可以看到在大正方体 cube 里设置了一个名为 cube 的动画，这就是让大正方体旋转起来的动画，关于动画的介绍我在之前的文章里写过很多次了，并且 css 的简单旋转动画并不难，将那些属性值熟悉一下就可以了。当然我们也可以用 animation：xxx; 将这些值写在一句里，这里将它们分开是让大家更好地看清楚各个值代表的含义。

/*外部立方体核心 */
.cube{
	position:relative;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	animation-name:cube;
        animation-duration:3s;
	animation-iteration-count:infinite;
	transition-timing-function:linear;
}

然后来说说 transform-style:preserve-3d; 这个属性，它可以让元素以 3D 形式呈现出来，没有它，就不会有 3D 效果了。

最后来说一下小正方体的实现。小正方体其实和大正体是一样的，只需要将一些样式属性值根据个人喜好修改即可（比如颜色方面我这里使用爱马仕橙和蒂芙尼蓝都还是不错的）。关于这部分的代码大家可以在码上AdminJS里看一看，前文和后文都会附上码上AdminJS地址。

下面这里是文字部分的样式。每个人的角度不同，所以也是根据大家的个人喜好修改即可，我们的重点放在下面的动画实现上。

.word{
	position:absolute;
	width:100px;
	margin-left:50px;;
	color:pink;
	text-align:center;
	line-height:200px;
	font-size:52px;
	font-family:'楷体';
	border-radius:10px;
	text-shadow:0 0 50px #fff;
	transition-duration:6s;
	opacity:0;
	animation-delay:1s;
}
.word p{
	width:100px;
	line-height:50px;
	text-align:center;
}

css实现动画

这里就是相关动画的实现了。我们这里总共有四个动画部分，两个旋转动画，一个展开动画以及一个过渡弹出动画。

这个是大正方体 cube 的自定义旋转动画，简单理解就是将正方体三百六十度无死角旋转，这个还是比较简单的。

@keyframes cube{
	0%{transform:rotateY(0deg)}
	100%{transform:rotateY(360deg)}
}

这个是当鼠标移动到外部大正方体表面后各个面展开的动画，通过 transform 来实现动画。当某种改变发生时才能获取样式，比如这里的 hover，这样就会产生动画。

transform-origin 定义的是旋转的基点。rotate 是旋转，比如逆时针和顺时针旋转。

translate 是平移的意思，比如 transform:translateY(-500px) translateX(200px) rotateX(90deg); 就是沿着 Y 轴向上平移 500px 和沿着 X 轴向右平移 200px。这里的 Y 轴向下是正，X 轴向右是正。所以弄清楚它们代表的含义，动画就可以完成一大半。

.skeleton:hover .cube{
     cursor:pointer;
	animation-play-state:paused;
}
.skeleton:hover .common{
	box-shadow:0 0 500px #e66d50;
}
.skeleton:hover .con{
	box-shadow:0 0 500px #0ABAB5;
}
.skeleton:hover .cube > .top{
	transform:translateY(-500px) translateX(200px)  rotateX(90deg);
}
.skeleton:hover  .cube >.front{
	transform-origin:bottom;
	transform:translateZ(150px) rotateX(-90deg)
}
.skeleton:hover  .cube >.behind{
	transform-origin:bottom;
	transform:translateZ(-150px) rotateX(90deg)
}
.skeleton:hover  .cube >.left{
	transform-origin:bottom;
	transform:rotateY(-90deg) rotateX(-90deg);	
}
.skeleton:hover  .cube >.right{
	transform-origin:bottom;
	transform:rotateY(90deg) rotateX(-90deg);	
}

这个是小正方体 smallcube 的自定义旋转动画。这里和大正方体的自定义动画不同之处在于，这里加入了 translate 平移，因为小正方体是包含在大正方体内部的。

@keyframes smallcube{
	0%{transform:translateX(50px) translateY(-220px) translateZ(-600px) rotateY(0deg)}
	100%{transform:translateX(50px) translateY(-220px) translateZ(-600px) rotateY(-360deg)}
}

这是文字的过渡弹出动画。也是通过 transform 实现的，结合上面的 XY 轴图，这个就很好理解了。

.skeleton:hover .word{
	opacity:1;
	transform:translateY(-400px);	
}	

以上就是各个动画的实现部分了。

总结

完整代码地址如下：

代码的世界可以很简单也可以很浪漫，不知道大家心中的那份浪漫会怎么表示出来呢（哦对，今天还是情人节喔），欢迎在评论区告诉我。