当青训营遇上码上掘金
1.选题原因
来到青训营，了解到很多优秀的小伙伴，也认识到了很多自己的不足，所以希望通过遇见这个主题创作认识到更多心灵契合，性格相投，观念相近的朋友
2.创作灵感
我们会遇见各种各样的人，每个人的性格观念都不一样，为了找到更契合自己的朋友，所以做了一个调查问卷，提交调查问卷之后会自动测试默契度，并在屏幕上提示。
页面创作解说
- 页面的主题都设置的黑色背景，是为了给文字设置了渐变颜色，个人决定这样显示会更炫酷一点，（虽然展示效果没有那么好，电脑，手机上排版显示效果真的不好）
- ‘Nice To Meet You’和下面的文字都设置了一个文字渐变，并且做了一个逐渐显现的动画，主要是想提高页面的动态性
- 代码为：
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(19deg,#d8cb35 0%,rgb(210, 59, 142) 100%); - 下面的“一键测试默契度”按钮用动画和伪类做了一个移动的边框，其实是想提高页面的吸引力
- 测试按钮也是一个锚点，链接下面的测试问卷，但是感觉没有必要（写到这里突然发现自己是来吐槽自己的主题创作的吧）因为它们离的很近，也是为了互动，增加动态性 首先创建了一个盒子，用伪类before做了一个蓝色的盒子，设置按中心旋转动画 又用after伪类创建了一个盒子遮住蓝色盒子的内部，主盒子设置overflow: hidden;隐藏了溢出的蓝色盒子。所以就设置出了一个移动的边框
.bt{
width: 200px;
height: 100px;
border-radius: 10%;
border:5px solid #000;
color: rgb(0, 255, 221);
margin: 50px;
padding: 6px;
position: relative;
overflow: hidden;
}
.bt::before{
content: "";
display: block;
width: 60%;
height: 100%;
background-color: aqua;
position: absolute;
left: 50%;
top:50%;
animation: rotate-box 2s linear infinite;
transform-origin: 0 0;
}
@keyframes rotate-box{
to{
transform: rotate(360deg);
}
}
.bt::after{
content: "一键测试默契度";
display: block;
width: 100%;
height: 100%;
background: #000;
position: relative;
text-align: center;
line-height: 100px;
border-radius: 10%;
}
接着就是表单元素，用来提交选项
最后是问卷的提交按钮做了一个渐变样式
background-image: linear-gradient(45deg,rgb(170, 31, 170) ,#13f6f6,#38d016);
界面就是这样：
JS代码就是获取提交的答案然后计算默契度,把默契度提示出来
