我正在参加「码上掘金迎新年」编程比赛，详情请看： 码上掘金迎新年
old school 与回忆
我记得上学的时候，很喜欢互赠纸质贺卡。有一段时间，立体贺卡特别流行，深受大家的喜欢。
随后，伴随着互联网的发展，诞生了电子贺卡，不仅寄送方便，而且可以播放音乐和动画效果，且是免费的。因此电子贺卡逐渐成为人们相互问候的优先选择。
再后来，无论是电子贺卡，还是纸质贺卡，都逐渐淡出大众的视野。偶尔，出去旅游，会购买当地特色的明信片作为伴手礼。听说在有「世界尽头」之称的乌斯怀亚，有一间小邮局，如果有机会还蛮想去，买一张明信片，上面有“世界尽头邮政”字样，可以买来现场填写地址后邮寄到全球各地。
岁末将至，敬颂冬绥。想到好久不见的贺卡，在这个新旧交接的岁末，想用复古一些的方式，给朋友们送一份祝福。
因为大家天南海北的，电子贺卡比较方便，于是，我想到用 CSS 绘制一张新年贺卡，送给五湖四海的朋友。
新年贺卡
叮，有一封来自叶一一的手绘新年贺卡，请查收来~
3D 翻转
两种翻转
我一共设计了两种翻转，第一个是抽出卡片时的自动翻转，另一个是通过点击卡片的手动翻转。
因为两种翻转都是通过点击卡片触发的，所以用到同一个方法处理两种交互。我是通过设置了一个点击计数：count，区分不同的触发方式的。
// 触发计数，初始为0
var count = 0;
card.addEventListener('click', e => {
// 当count值大于等于1时，表示进行的手动翻转
if (count >= 1) {
card.classList.toggle('overturn');
} else {
/*
* 当count值小于1时，表示需要进行自动翻转
* 自动翻转前，需要将信封去掉，卡片向上滑动
* */
envelope.style.display = 'none';
cardWarp.classList.add('card-up');
setTimeout(function () {
card.classList.add('overturn');
}, 1000);
}
count++;
});
3D 翻转效果
首先需要允许子元素位于 3D 空间中。需要将元素的 transform-style 属性设置为 preserve-3d。这样，在元素进行翻转的时候，子元素会才会有 3D 转换的效果。
实际的翻转效果是通过为元素的两个属性组合实现的，一个是翻转切换的动画，另一个是背向用户时不可见。
- 翻转动画通过 transform 设置 3D 转换效果即可，元素沿 X 轴和 Z轴进行旋转；
- 背向用户时不可见，是通过设置 backface-visibility 的属性为 hidden。它的值为 visible 时，表示可见。
.card {
position: relative;
transform-style: preserve-3d;
height: 100%;
width: 100%;
transition: transform 2s ease-in;
}
.card.overturn {
transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.card-back {
display: flex;
flex-direction: column;
align-items: center;
transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.card-item {
backface-visibility: hidden;
}
城市星河
星河璀璨
一个标签，轻松实现繁星效果。
只需要一个 2px * 2px 的 DIV 即可，剩下的就交给 box-shadow。
box-shadow 不仅可以画心，还可以画星星。
.stars {
width: 2px;
height: 2px;
border-radius: 100%;
box-shadow: 10px 0px #cfcfc6, 40px 2px #cfcfc6, 70px 0px #cfcfc6, 110px 3px #cfcfc6, 140px 0px #cfcfc6, 190px 2px #cfcfc6, 240px 0px #cfcfc6, 270px 5px #cfcfc6, 320px 0px #cfcfc6, 5px 20px #cfcfc6, 50px 24px #cfcfc6, 100px 30px #cfcfc6, 120px 30px #cfcfc6, 150px 24px #cfcfc6, 180px 30px #cfcfc6, 240px 24px #cfcfc6, 270px 26px #cfcfc6, 300px 30px #cfcfc6, 10px 40px #cfcfc6, 40px 45px #cfcfc6, 70px 45px #cfcfc6, 110px 44px #cfcfc6, 140px 48px #cfcfc6, 2px 50px #cfcfc6, 30px 55px #cfcfc6, 60px 60px #cfcfc6, 90px 70px #cfcfc6, 130px 68px #cfcfc6, 2px 70px #cfcfc6, 20px 77px #cfcfc6, 40px 66px #cfcfc6, 60px 80px #cfcfc6, 100px 90px #cfcfc6, 150px 80px #cfcfc6, 180px 70px #cfcfc6, 200px 80px #cfcfc6, 230px 77px #cfcfc6;
position: absolute;
}
城市灯火
同样是一个标签，实现灯火通明的大厦效果。
灯火样式和楼层样式，均使用伪元素实现。
灯火效果，使用 box-shadow，基本繁星效果一摸一样。
楼层效果，也使用 box-shadow，不过楼层是竖线，所以需要 设置和父元素等长的高度。
.builds {
width: 70px;
height: 160px;
border-radius: 5px 5px 0 0;
background: #193f71;
position: absolute;
overflow: hidden;
}
.builds::after {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 2px;
border-radius: 100%;
background: transparent;
box-shadow: 25px 10px #5e9cbd, 24px 60px #5e9cbd, 20px 70px #5e9cbd, 18px 90px #5e9cbd, 23px 120px #5e9cbd, 23px 140px #5e9cbd, 36px 28px #5e9cbd, 36px 70px #5e9cbd, 36px 160px #5e9cbd, 46px 10px #5e9cbd, 50px 60px #5e9cbd, 42px 90px #5e9cbd, 46px 120px #5e9cbd, 58px 20px #5e9cbd, 60px 80px #5e9cbd, 60px 120px #5e9cbd, 60px 160px #5e9cbd, 76px 10px #5e9cbd, 76px 60px #5e9cbd, 76px 80px #5e9cbd, 70px 130px #5e9cbd;
z-index: 99;
}
.builds::before {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 100%;
border-radius: 100%;
background: transparent;
box-shadow: 12px 0px #295485, 24px 0px #295485, 36px 0px #295485, 48px 0px #295485, 60px 0px #295485, 72px 0px #295485;
z-index: 99;
}
人间皆安
这万千灯火中，总有一盏是为我们点亮的。仰起头就能看到，属于家的柔和的灯光。
这就是我设计这个建筑的初衷。每扇窗户后面，是一个关于家的温馨故事。
窗户
一个标签，实现窗户效果。
窗户是带边框的矩形，上面的隔档，使用伪元素即可。
.casement {
width: 70px;
height: 100px;
background: #ffe097;
position: absolute;
left: 30px;
border: 2px solid #453d52;
overflow: hidden;
}
.casement::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
margin-left: -2px;
background: #453d52;
z-index: 99;
}
窗帘
窗帘的实现还是很有趣的。
依旧是一个标签完成窗帘的效果。窗帘收起来的效果，主要在于图形结合圆角的设置。
窗帘上半部分较长，下半部分较短，符合日常对窗帘的认知。设置上下两个图形一个角度上的弧度，组合在一起形成被收起的效果。
.curtain {
position: absolute;
z-index: 10;
top: 0;
right: 0;
}
.curtain::before,
.curtain::after {
content: '';
position: absolute;
background: #bda16a;
}
.curtain::before {
width: 30px;
height: 70px;
top: 0;
right: -5px;
border-radius: 0 0 0 100%;
}
.curtain::after {
width: 20px;
height: 34px;
top: 67px;
right: -5px;
border-radius: 100% 0 0 0;
}
最终效果
彩蛋时刻
这个彩蛋是我抓住的稍纵即逝的灵感，有那么点「棋魂」里的神之一手的感觉。
当我看到星光下的高楼大厦，突然想到之前在上海东方明珠上观察地面时的楼宇的情景，远处的高大建筑，大多拥有醒目的 LOGO。叮，贺卡里的楼宇也可以加上 LOGO，掘金的 LOGO 就设计的很好看。
码上掘金里创作的代码效果加上了掘金 LOGO，这个搭配岂不妙哉。
先观察
掘金这个 LOGO 设计的很有意思，虽然是平面图，但是视觉上像一个立体的金字塔。这个设计很巧妙。
我们来拆解一下这个 LOGO。无论是顺时针还是逆时针旋转45度，都可以将它拆解为三个部分：
一个正方形、一个折线、另一个折线。
后实现
正方形的实现还是很简单的。
.juejin {
width: 16px;
height: 16px;
background: #1f80ff;
}
而折线可以看做是缺少两个边的正方形，只需要完成一对相邻的边即可。
而作为除了正方形以外的唯二两个图形。两个折线使用伪类实现即可。
最终我会将图形进行逆时针旋转，所以相邻两个边选择了图形的右侧和下侧。
.juejin::before,
.juejin::after {
content: '';
border-right: 8px solid #1f80ff;
border-bottom: 8px solid #1f80ff;
left: 0;
top: 0;
background: transparent;
position: absolute;
}
.juejin::before {
width: 24px;
height: 24px;
}
.juejin::after {
width: 40px;
height: 40px;
}
三个部分实现完成，还需要一个步骤，那就是图形旋转， 根据需要顺时针旋转45度。
这个时候就能得到最终的 LOGO，将 LOGO 摆放在贺卡中，最大最有设计特色的大厦即可。
.juejin {
position: absolute;
width: 16px;
height: 16px;
background: #1f80ff;
transform: rotate(45deg) scale(0.3);
right: 5px;
bottom: 250px;
z-index: 999;
}
总结
这次实现的新年贺卡的元素较多，但是大部分使用一个标签完成了实现，使得整体结构偏简洁。当然也在于我日常对图形实现经验在不断的练习中，得到了很好的积累。盖业精于勤也。
最后，送上叶一一的祝福
愿山河无恙，人间皆安，春风如故，桑梓依然。多喜乐，长安宁，岁无忧，久安康。
一月月相似，一年年不同
每个月都好像匆匆忙忙就过去了，唯有回望的时候，才发现这一年的不同。今年很多收获都离不开阅读。
读《命运》，重新审视这个词汇，靠着为数不多的经验，总结出一条人生经验：要好好的活着，因为人生一定会遇到好事的。
看《算命》，不再纠结活着的意义，因为感悟出：活着本身就是最大的意义。
读《季羡林散文》，解锁了人生的界石。今后的路怎么走？向着有亮光的地方前行。
查阅了很多图形、画册，于是诞生了「CSS 畅想」系列。
阅览了很多优秀的文章，于是我也开启了源码的阅读。
翻阅了许许多多的沸点，于是我收获了诸多好友。
新的一年要开篇了，虽然我不晓得怎么去写年，但是我可以用写文章的方式去记录它。
我一直不晓得怎么去写「年」。它是，一个单位呢？一种风景呢？还是一本特别记事本？说它度量了岁月，但是「年年岁岁花相似，岁岁年年人不同」，它却处处有风景。说它记录了四季景色，但是「入春才七日，离家已二年」，它又成了离愁别绪中的岁月。
