CSS畅想 | 纯 CSS 实现手绘新年贺卡

举报
叶一一 发表于 2023/08/19 19:49:24 2023/08/19
【摘要】 old school 与回忆我记得上学的时候,很喜欢互赠纸质贺卡。有一段时间,立体贺卡特别流行,深受大家的喜欢。随后,伴随着互联网的发展,诞生了电子贺卡,不仅寄送方便,而且可以播放音乐和动画效果,且是免费的。因此电子贺卡逐渐成为人们相互问候的优先选择。再后来,无论是电子贺卡,还是纸质贺卡,都逐渐淡出大众的视野。偶尔,出去旅游,会购买当地特色的明信片作为伴手礼。听说在有「世界尽头」之称的乌斯怀...

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畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。