当青训营遇上码上掘金~
前言
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。这不，闲来无事，我也进行了一番“创作”！市场上的名片大同小异，基本上都围绕卡片的元素展开，既然是创作，那当然要做点花里胡哨的(●'◡'●)一直想做赛博朋克风，这次终于有机会接触接触了！
整体样式设计
最开始想到的是一张背景图加上一些文字动效的方式，后来参考圈内大佬的文章，对内容做了修改。直接使用不规则方框套内容，把整体卡片显现出满满科技感。
.box {
padding: 5px;
position: relative;
font-size: 1.2rem;
color: var(--yellow-color);
border: 30px solid var(--yellow-color);
border-right: 5px solid var(--yellow-color);
border-left: 5px solid var(--yellow-color);
border-bottom: 24px solid var(--yellow-color);
background-image: url("https://images.pexels.com/photos/1906658/pexels-photo-1906658.jpeg?auto=compress&cs=tinysrgb&w=600");
background-size: 100%;
background-repeat: no-repeat;
clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) 100%, 80px calc(100% - 0px), 65px calc(100% - 15px), 0% calc(100% - 15px));
}
上述内容主要是用border属性修改四边的距离，同时用clip-path: polygon()属性做切割，使之呈现出不规则形状。同时在polygon内部，还存在calc动态计算长度值的CSS计算函数，该函数应用标准的数学计算公式，用它计算出多边形各个顶点的位置信息作为polygon绘制多边形的顶点，如此便得到了基础的多边形。
霓虹闪烁
霓虹闪烁的思路是做一个在起始位置相同，中点位置有一个颜色变化，来呈现出一闪一回的动态效果，使用的css的动画。
.neon {
font-size: 3.125rem;
text-shadow: 0 0 3vw #F4BD0A;
animation: neon 2s ease-in-out infinite;
padding-left: 22%;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
color: #FFFC00;
}
50% {
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
color: #806914;
}
}
文字的霓虹效果主要是通过text-shadow设置文字阴影实现的，放大阴影的同时字体颜色发生变化。在keyframes关键帧中，指定一个动画元素，随后在需要使用动画的标签中设置animation动画即可实现霓虹闪烁的效果。动画的运动方式分多种，可以选择ease-in-out的起始较慢，中间匀速的方式，也可以选择liner的全程匀速播放，后加上infinite使之循环播放即可。
个人说明
个人说明采用的是textarea多行文本写入方式，同时设置了一个半透明的背景以适应整体背景色。
background-color: rgba(255, 250, 232, 0.5);
width: calc(100% - 30px);
border: 30px solid rgba(20, 20, 30, 0);
border-left: 5px solid rgba(20, 20, 30, 0);
border-right: 5px solid rgba(20, 20, 30, 0);
border-bottom: 15px solid rgba(20, 20, 30, 0);
clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
padding: 12px;
animation: textarea 2s linear infinite;
text-align: left;
font-size: 22px;
同样式设计一样，多边形的裁切依然使用的是clip-path:polygon与calc结合的计算顶点裁切方式。
总结
总体设计效果： 关于科技感的名片设计，最初想的挺好的，后来在做的时候问题还是很多的，此次经历只是大致了解了科技风制作的基本原理，主要还是对于色彩的把握不太到位，做出来的效果不如最开始想的那么好，不过也算是深入了解了一下css动画方面的相关内容。
