CSS畅想 | 纯 CSS 实现手绘新年贺卡
old school 与回忆
我记得上学的时候,很喜欢互赠纸质贺卡。有一段时间,立体贺卡特别流行,深受大家的喜欢。
随后,伴随着互联网的发展,诞生了电子贺卡,不仅寄送方便,而且可以播放音乐和动画效果,且是免费的。因此电子贺卡逐渐成为人们相互问候的优先选择。
再后来,无论是电子贺卡,还是纸质贺卡,都逐渐淡出大众的视野。偶尔,出去旅游,会购买当地特色的明信片作为伴手礼。听说在有「世界尽头」之称的乌斯怀亚,有一间小邮局,如果有机会还蛮想去,买一张明信片,上面有“世界尽头邮政”字样,可以买来现场填写地址后邮寄到全球各地。
岁末将至,敬颂冬绥。想到好久不见的贺卡,在这个新旧交接的岁末,想用复古一些的方式,给朋友们送一份祝福。
因为大家天南海北的,电子贺卡比较方便,于是,我想到用 CSS 绘制一张新年贺卡,送给五湖四海的朋友。
贺卡创意的来源
前面分享了城市星河的实现过程,突然联想到电子贺卡。
城市星河只要加上一个效果,就是一个电子贺卡。而这个效果便是3D翻转。
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;
}
总结
这次实现的新年贺卡的元素较多,但是大部分使用一个标签完成了实现,使得整体结构偏简洁。当然也在于我日常对图形实现经验在不断的练习中,得到了很好的积累。盖业精于勤也。
最后,送上叶一一的祝福
愿山河无恙,人间皆安,春风如故,桑梓依然。多喜乐,长安宁,岁无忧,久安康。
一月月相似,一年年不同
每个月都好像匆匆忙忙就过去了,唯有回望的时候,才发现这一年的不同。今年很多收获都离不开阅读。
读《命运》,重新审视这个词汇,靠着为数不多的经验,总结出一条人生经验:要好好的活着,因为人生一定会遇到好事的。
看《算命》,不再纠结活着的意义,因为感悟出:活着本身就是最大的意义。
读《季羡林散文》,解锁了人生的界石。今后的路怎么走?向着有亮光的地方前行。
查阅了很多图形、画册,于是诞生了「CSS 畅想」系列。
阅览了很多优秀的文章,于是我也开启了源码的阅读。
翻阅了许许多多的沸点,于是我收获了诸多好友。
新的一年要开篇了,虽然我不晓得怎么去写年,但是我可以用写文章的方式去记录它。
我一直不晓得怎么去写「年」。它是,一个单位呢?一种风景呢?还是一本特别记事本?说它度量了岁月,但是「年年岁岁花相似,岁岁年年人不同」,它却处处有风景。说它记录了四季景色,但是「入春才七日,离家已二年」,它又成了离愁别绪中的岁月
作者:非职业「传道授业解惑」的开发者叶一一
简介:「趣学前端」、「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论(0)