当青训营遇上码上掘金
「青训营 X 码上掘金」主题创作活动入营版，快乐写码赢青训营青豆！
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。
演示
思路
主要设计
- 滑动效果，丝滑切换
- 鼠标未放上去的时候，是第一面，鼠标放上去后滑动到第二面
- 第一面设计一些条状，来增加美观度
- 第二面展示一张掘金账号二维码（毕竟现在到处都可扫码O(∩_∩)O哈哈~）
创意设计
- 昵称的浮现：第一面不展示，切换到第二面后展示。
代码实现
代码实现部分只保留了主要结构，方便理解
<!-- 名片分三大块
最外层的板块view
文字板块message
平面圆柱板块shape -->
<div class="view">
<div class="message">
</div>
</div>
<div class="shape">
<!-- --i是用来计算平面圆柱的动效延迟和距离的
--w则是用来计算平面圆柱的宽度 -->
<div class="strip" style="--i:1;--w:1.5"></div>
<div class="strip" style="--i:2;--w:1.6"></div>
<div class="strip" style="--i:3;--w:1.4"></div>
<div class="strip" style="--i:4;--w:1.7"></div>
<div class="strip2" style="--i:1"></div>
</div>
<!-- 设置掘金二维码 -->
<div class="img">
<img src="">
</div>
</div>
.message h2{
/* 鼠标放开时的动画，第一个值是动画的过渡时间
第二个值是延迟一秒后执行动画 */
transition: .5s 1s;
opacity: 0;
color: rgb(30,210,200);
}
.view:hover .shape div{
/* 设置延迟动画 */
transition: .5s calc(var(--i)*.1s);
/* 移动的轨迹 */
transform: rotateZ(220deg) translate(-200px,400px);
}
.view:hover .message{
transition: 1s .5s;
left: 370px;
}
.view:hover .message span{
transition: 1s .5s;
top: 105px;
}
.view:hover .message h2{
transition: 1s .5s;
opacity: 1;
}
.view:hover .img{
transition: 1s 1.3s;
opacity: 1;
}
总结
本次创作了一个简单的个人名片，用HTML和CSS实现，其中CSS的动画和条状颜色的设置实现了视觉美观效果
