我正在参加「码上AdminJS月赛第1期」,点击此处查看详情

前言

这次参加码上AdminJS月赛,有两个赛题方向,一是新年 FLAG,二是代码的浪漫,看到这两个赛题,我纠结起来了:

新年 FLAG?今年的 FLAG 无非是在找到一份好工作的同时出去旅游几次,但是绞尽脑汁也不知道用什么形式将其表达出来。

然后是代码的浪漫,什么是代码的浪漫?于是我去网上搜索代码的浪漫,然后给出来的结果大部分都是爱心或者表白语句,我仔细想了想,这些都太常见了,得琢磨点不同的才行。

这时候一个顺丰快递到了,我就先去拿了快递,拆开一看原来是AdminJS的兔年礼盒,看起来还不错。这时候突然冒出一个想法:诶!礼盒礼盒,用礼盒来代表浪漫也不是不可以的哇!

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

于是,一份来自程序员的浪漫礼盒呈给大家。

效果展示

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

实现流程

从效果上来看,就是两个正方体在不同地旋转,最后出来一行字。旋转的实现可以用%20js,也可以用%20css,由于我们这里没有使用到很多复杂的功能,所以这里用%20css%20来写旋转动画就足够了。css%20实现动画也有很多种,我们这里会使用到%20@keyframe%20以及%20transform%20两种。

基本框架搭建

我们先来搭建一下基本框架。

<div%20class="skeleton">
<!--%20立方体核心%20-->
%20%20%20%20<div%20class="cube">
%20%20%20%20%20%20%20%20<!--%20立方体上(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20top"></div>
%20%20%20%20%20%20%20%20<!--%20立方体下(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20bottom"></div>
%20%20%20%20%20%20%20%20<!--%20立方体左(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20left"></div>
%20%20%20%20%20%20%20%20<!--%20立方体右(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20right"></div>
%20%20%20%20%20%20%20%20<!--%20立方体前(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20front"></div>
%20%20%20%20%20%20%20%20<!--%20立方体后(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="common%20behind"></div>
%20%20%20%20</div>
%20%20%20%20<!--%20内部小立方体%20-->
%20%20%20%20<div%20class="smallcube">
%20%20%20%20%20%20%20%20<!--%20内部立方下(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="con%20smallbottom"></div>
%20%20%20%20%20%20%20%20<!--%20内部立方左(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="con%20smallleft"></div>
%20%20%20%20%20%20%20%20<!--%20内部立方右(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="con%20smallright"></div>
%20%20%20%20%20%20%20%20<!--%20内部立方前(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="con%20smallfront"></div>
%20%20%20%20%20%20%20%20<!--%20内部立方后(面)%20-->
%20%20%20%20%20%20%20%20<div%20class="con%20smallbehind"></div>
%20%20%20%20%20%20%20%20<div%20class="word"><p>程</p><p>序</p><p>员</p><p>的</p><p>浪</p><p>漫</p></div>
%20%20%20%20</div>
</div>

很显然我们只需要搭好两个正方体的框架即可,cube%20是外层的大正方体,smallcube%20是内层的小正方体,然后就是用%20div%20来表示正方体的各个面。

这里需要注意到,在小正方体里我们把%20top%20面给去掉了,这是因为这样可以让文字的弹出显得更加合理。虽然实际上而言在我们这个实现的最终效果中这里%20top%20面的存在是不影响文字的弹出(加上%20top%20面文字也可以弹出),但是适当地添加一些小细节也不是不可以的。

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);
}

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

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

我们可以看到在大正方体 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 轴向右是正。所以弄清楚它们代表的含义,动画就可以完成一大半。

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

.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);	
}	

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

总结

完整代码地址如下:

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

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

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