代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet/css" type="text/css" href="../styles/reset.css" />
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: white;
margin: 0;
padding: 0;
}
.firstPage{
width: 100vw;
height: 100vh;
background: linear-gradient(90deg,#007991,#78ffd6);
display: flex;
justify-content: center;
}
.myHeadPortrait{
transition-property: all;
transition-duration: 4s;
transition-delay: 0s, 1s, 0s;
border: solid 2px #000000;
border-radius: 10px;
}
.myHeadPortrait:hover{
border-radius: 90px;
box-shadow: 5px 3px 5px #03040a;
}
.introduce{
padding-top: 180px;
text-align: center;
}
.introduce h1{
padding: 10px 0;
-webkit-transition:all 1.5s ease;
transition:all 1.5s ease;
}
.introduce h1:hover{
color:#fff;
-webkit-animation:Glow 1.5s ease infinite alternate;
animation:Glow 1.5s ease infinite alternate;
}
@keyframes Glow {
from {
text-shadow:0 0 10px DarkSlateBlue,0 0 20px DarkSlateBlue,0 0 30px DarkSlateBlue,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;
}
to {
text-shadow:0 0 5px DarkSlateBlue,0 0 10px DarkSlateBlue,0 0 15px DarkSlateBlue,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;
}
}
.introduce p{
font-size: 16px;
padding: 5px 0;
}
.introduce h3{
display: flex;
float: right;
margin-top: 20px;
}
.introduce h3 a{
padding: 0 10px;
text-decoration: none;
}
.Bubble{
display: flex;
justify-content: space-evenly;
}
.Bubble .BubbleItem{
position: fixed;
list-style-type: none;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: .34667rem;
box-shadow: inset 0 0 0.66667rem 0.13333rem;
animation: pulse 2s linear infinite;
transition: opacity 1s 1s;
}
.Bubble .BubbleItem:first-child{
left: 26%;
top: 10%;
}
.Bubble .BubbleItem:nth-child(2){
left: 60%;
top: 10%;
}
.Bubble .BubbleItem:nth-child(3){
left: 36%;
top: 8%;
}
.Bubble .BubbleItem:nth-child(4){
left: 31%;
top: 31%;
}
.Bubble .BubbleItem:nth-child(5){
left: 58%;
top: 30%;
}
.Bubble .BubbleItem:last-child{
left: 68%;
top: 30%;
}
@keyframes pulse{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="firstPage">
<div class="introduce">
<div class="Bubble">
<div class="BubbleItem">24岁</div>
<div class="BubbleItem">在职</div>
<div class="BubbleItem">上海</div>
<div class="BubbleItem">本科一批</div>
<div class="BubbleItem">计算机专业</div>
<div class="BubbleItem">前端工程师</div>
</div>
<p><img src="./imgs/headPortrait.png" class="myHeadPortrait"></p>
<h1>Hey,我是柯灿文</h1>
<span></span>
<p>本科计算机专业,2018年底开始自学前端,对一些基础的计算机基础原理有着深刻的理解</p>
<p>从Vue框架,从MPA、SPA到小程序、快应用、electron,对开源分享造轮子亦有浓厚兴趣。</p>
<h3>
<a href="">掘金</a>
<a href="">csdn</a>
<a href="">github</a>
<a href="">公众号</a>
</h3>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。