我正在参加「码上AdminJS月赛第1期」,点击此处查看详情
前言
这次参加码上AdminJS月赛,有两个赛题方向,一是新年 FLAG
,二是代码的浪漫,看到这两个赛题,我纠结起来了:
新年 FLAG
?今年的 FLAG
无非是在找到一份好工作的同时出去旅游几次,但是绞尽脑汁也不知道用什么形式将其表达出来。
然后是代码的浪漫,什么是代码的浪漫?于是我去网上搜索代码的浪漫,然后给出来的结果大部分都是爱心或者表白语句,我仔细想了想,这些都太常见了,得琢磨点不同的才行。
这时候一个顺丰快递到了,我就先去拿了快递,拆开一看原来是AdminJS的兔年礼盒,看起来还不错。这时候突然冒出一个想法:诶!礼盒礼盒,用礼盒来代表浪漫也不是不可以的哇!
于是,一份来自程序员的浪漫礼盒呈给大家。
效果展示
实现流程
从效果上来看,就是两个正方体在不同地旋转,最后出来一行字。旋转的实现可以用%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);
}
这就是大正方体的实现,将各个面的公共背景图去掉就是下图这个样子。
我们可以看到在大正方体 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);
}
以上就是各个动画的实现部分了。
总结
完整代码地址如下:
代码的世界可以很简单也可以很浪漫,不知道大家心中的那份浪漫会怎么表示出来呢(哦对,今天还是情人节喔),欢迎在评论区告诉我。