当青训营遇上码上掘金
前言
想必喜欢侦探风格、悬疑风格的大家一定都知道一个动漫人物——工藤新一。就我个人而言，工藤新一就是童年时期的偶像，于是本次的码上掘金创作活动就以我的偶像工藤新一为主题创作新一主题名片。
创作亮点
1. 滑盖打开
简单来说就是事先摆出一个可移动的盖子覆盖在名片的主体上，随后给盖子设置可点击事件，该事件被触发后会给这个盖子新增动画属性让其向一侧移动并且最后消失，还可以给盖子上添加一些样式，使用户体验感更好，效果如下所示
/**
* 函数移动盖子
* @param {string} id 为需要移动盖子的目标元素id
*/
function moveLid(id) {
const item = document.getElementById(id);
item.style.animation =
"1s linear 0s 1 normal forwards running slide-cover";
setTimeout(() => {
while (item.children.length >= 1) {
item.removeChild(item.children[0]);
}
}, 1000);
}
2. 翻面功能
点击头像侧可以实现翻面功能，首先需要先写好背面的卡片页面，随后设置transform属性让两面的卡片页同时翻转180度即设置rotateY(180deg)，同时设置动画的过渡时间为1s，背面页面如下所示
const item = document.getElementById("card");
const item_cardSide = item.querySelector(".photo");
const item_otherSide = item.querySelector(".other-side");
//添加监听事件，点击后进行翻面
item_cardSide.addEventListener("click", () => {
item.className = "card-click";
});
//添加监听事件，点击后进行翻面
item_otherSide.addEventListener("click", () => {
item.className = "card-container";
});
3. 卡面正面的渐变色
css颜色的设置相信大家都有了解，但了解的最多的应该还是纯色，如何设置渐变色使得卡片的背景色更加丰富呢？本次的设计使用的是linear-gradient这一属性，linear-gradient可以传入三个参数，分别是渐变角度、起始色以及终止色
我们设置背景为linear-gradient(5deg, #f8d8ed, #90e7f3)，效果如下所示
小结
本篇文章所展示的主题卡片使用前端三剑客——HTML、CSS与JS进行编写，作为一名前端开发者，设计出如下的卡片并不困难，但是能够想到布局等内容需要具有一定的设计灵感，话不多说，下面就是本次设计使用的代码以及效果展示
