当青训营遇上码上掘金,在数字信息化时代,每个人的生活工作学习都离不开各种类型的信息,名片以其特有的形式传递在企业,人与人等业务信息中,一张个性化的名片可以给生活带来很大的方便,接下来我们开始正文.

代码由HTML+CSS+JS组成

页面构成

整个名片分为两部分构成,上半部分为backgroundimage,存放头像以及背景图,下半部分content主要为个人信息以及社交网站链接.

HTML部分

页面整体为上下布局,上部分div为backgroundimage的盒子里面放着一张图片作为头像,以及名字。下部分div为content里面存放着个人信息描述,以及内嵌了一个div为icon的盒子里面存放着字体图标在内的a链接。

CSS部分

为了页面美观，整个盒子都做了圆角边框border-radius: 30px，然后名片的上半部分div做了一个线性渐变background-image: linear-gradient(210deg, #Ead6ee 35%, #a0f1ea);这段代码的含义是旋转角度为210度从过度起始35%的位置开始由#Ead6ee线性渐变到#a0f1ea

效果图

这里的上半部分盒子值得注意的地方是这里的盒子需要再一次设置border-radius,不然div为backgroundimage会把div为main的盒子盖住,使得我们的圆角边框丢失,而这里有个值得提的地方,这里设置的border-radius需要是左上角和右上角,为了我们的名片更加美观,这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序即为:border-radius: 30px 30px 0px 0px;下半部分的个人信息内容根据绝对定位以及内外边距稍加调整即可,这里值得一提的是,下面的字体图标为了不那么的单一,所以为其设置了鼠标经过的即可改变颜色的效果hover

JS部分

前言:光设置一个线性渐变名片还是有一些单一,在这里我们利用js代码动态的修改过度起始的位置使其达到可以动的效果,在这里我们创建一个数组,在里面存放每次需要增长的线性渐变起始位置的值,然后创建get函数让n每次++,如果当n等于数组长度-1时,重新设置为0,以此来遍历我们的数组,然后通过querySelector获取class名为backgroundimage的dom元素,设置他的css属性为我们数组的下标为n的时的内容,再通过 setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数,setTimeout("get()", 100);此代码的意思为100毫秒过后调用get()函数,以此来完成动态的线性渐变

如代码有可修改完善的地方,欢迎各位给予改进意见