当青训营遇上码上。
前言
最近沉浸《孤单摇滚!》,主人公后藤一里是个交际恐惧症患者,但其实在另一面她是吉他技能超群的“Guitar Hero”。刚好这次「青训营 X 码上」主题创造活动的其中一个主题就是“我的手刺”。每个人应该都有自己的理想与实际的正反两面,于是我想做一个卡片点击翻转的作用。原理很简单,经典的登陆注册卡片翻转的完成也类似。
《孤单摇滚!》简介如下。
作为网络吉他手“Guitar Hero”而广受好评的后藤一里,在实际中却是个什么都不会的交流妨碍者。一里有着组成乐队的愿望,但由于不敢向人自动搭腔而一向没有成功,直到一天在公园中被伊地知虹夏发现并邀请进入短少吉他手的“结束乐队”。但是,彻底没有和他人协作经历的一里,在人前彻底发挥不出本来的实力。为了尽力克服交流妨碍,一里与“结束乐队”的成员们一起开始尽力……(摘自萌娘百科)
主题:我的手刺
手刺是向人介绍自我的重要工具,作为一名程序员用代码做自我介绍是一件十分酷炫的工作。请大家环绕“我的手刺”这个主题进行代码创造。
演示
点击头像即可将卡片翻转。
思路
- 独自写两个盒子(卡片不和和卡片正面),运用肯定定位将两个盒子堆叠。卡片正面盒子应当写在卡片不和的下面,这样堆叠时卡片正面会在上面。
- 运用
rotateY(-180deg)
将卡片不和先翻面,运用backface-visibility: hidden;
可以使卡片不和不和朝向用户时不可见。 - 为图片增加点击事件,点击图片时,两个盒子各翻转
(180deg)
,卡片正面翻到不和,卡片不和翻到正面。
代码完成
代码完成部分省去了部分内容与样式,只保留主要结构,方便理解。
HTML部分:
<div class="container">
<!-- 卡片不和 -->
<div class="card reverse">
<div class="avatar">
<img src=""/>
</div>
</div>
<!-- 卡片正面 -->
<div class="card front">
<div class="avatar">
<img src=""/>
</div>
</div>
</div>
CSS部分:
.card{
position: absolute;
backface-visibility: hidden;
transition: all 1s;
}
.reverse{
transform: rotateY(-180deg);
}
JS部分:
const front = document.querySelector(".front");
const reverse = document.querySelector(".reverse");
const frontButton = front.querySelector(".avatar");
const reverseButton = reverse.querySelector(".avatar");
// 卡片正面翻转
frontButton.addEventListener("click", () => {
front.style.transform="rotateY(180deg)"
reverse.style.transform="rotateY(0deg)"
})
// 卡片不和翻转
reverseButton.addEventListener("click", () => {
reverse.style.transform="rotateY(-180deg)"
front.style.transform="rotateY(0deg)"
})