近期因?yàn)樽约合胱鲆粋€(gè)項(xiàng)目的登陸界面，想要實(shí)現(xiàn)一些效果，然后在打游戲的時(shí)候看到了王者榮耀匹配的界面效果很不錯(cuò)，所以在百度上找了一下實(shí)現(xiàn)的代碼，也跟著敲了一下，順便能夠讓我這個(gè)菜雞熟悉一下一些 CSS 的屬性。代碼資源是百度上有的，但有小小的修改，在此感謝提供代碼的博主。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<style type="text/css">
html{
font-size: 16px;
}
.group{
position: relative;
width: calc((100% - 13rem)/2);
top: 50%;
transform: translate(0,-50%);
}
.group1{
text-align: right;
float: left;
}
.group2{
text-align: left;
float: right;
}
.group1 div,.group2 div{
position: relative;
width: 4rem;
height: 4rem;
display: inline-block;
background: url('img/頭像.png');
background-size: cover;
border: .3rem solid #55A9EF;
box-shadow: 0 0 .8rem #88C0F0;
color: #fff;
}
.group1 div::before,.group1 div::after,
.group2 div::before,.group2 div::after{
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -8%;
box-shadow: inset 0 0 0 .3rem;
animation: clipMe 6s linear infinite;
}
.group1 div::before,
.group2 div::before{
animation-delay: -3s;
}
@keyframes clipMe{
0%,
100%{
clip: rect(0, 4.8rem, 4.8rem, 4.3rem);
}
25%{
clip: rect(0px, 4.8rem, .3rem, 0);
}
50% {
clip: rect(0, .3rem, 4.8rem, 0);
}
75% {
clip: rect(4.3rem, 4.8rem, 4.8rem, 0rem);
}
}
.king{
position: relative;
height: 25rem;
width: 100%;
background: radial-gradient(circle,#ccc,#161d4f 85%);
}
.player-layout{
position: relative;
height: 8rem;
width: 100%;
background: linear-gradient(to right,#212f46,#212f4670,#212f46);
top: 50%;
transform: translate(0,-50%);
z-index: 10;
}
.center{
position: absolute;
height: 8rem;
width: 8rem;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)rotate(45deg);
background: linear-gradient(90deg, #212f46, #5b99ff);
border: .3rem solid #55a9ef;
box-shadow: 0px 0px .8rem #88c0f0;
padding: .2rem;
}
.center img{
width: 100%;
height: 100%;
}
.matrix{
position: absolute;
height: 16.7rem;
width: 16.7rem;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)rotate(45deg);
z-index: 1;
border: .1rem solid #7499D7;
padding: .4rem;
}
.border1,.border2{
position: absolute;
height: 16.7rem;
width: 16.7rem;
text-align: center;
font-size: 14px;
}
.border1::before,.border1::after,
.border2::before,.border2::after{
position: absolute;
display: block;
width: 100%;
height: 2.5rem;
color: #fff;
background: linear-gradient(to top, #212f4602, #7499d7);
animation: text-an 1.5s linear infinite;
}
@keyframes text-an{
0%{
text-shadow: 0 0 0 #FFFFFF;
}
100%{
text-shadow: 0 -6rem .4rem #FFFFFF10;
}
}
.border1::before{
content: 'HelloWorld';
}
.border1::after{
bottom: 0;
content: 'GoodMorning';
transform: rotate(180deg);
}
.border2{
transform: rotate(90deg);
}
.border2::before{
content: 'GGstudy';
}
.border2::after{
bottom: 0;
content: 'DayDayup';
transform: rotate(180deg);
}
</style>
<body>
<div class="king">
<div class="player-layout">
<div class="group group1">
<div class="player1 palyer"></div>
<div class="player2 palyer"></div>
<div class="player3 palyer"></div>
<div class="player4 palyer"></div>
<div class="player5 palyer"></div>
</div>
<div class="group group2">
<div class="player6 palyer"></div>
<div class="player7 palyer"></div>
<div class="player8 palyer"></div>
<div class="player9 palyer"></div>
<div class="player10 palyer"></div>
</div>
<div class="center">
<img src="img/頭像.png"/>
</div>
</div>
<div class="matrix">
<div class="border1"></div>
<div class="border2"></div>
</div>
</div>
</body>
</html>
一些在學(xué)習(xí)過(guò)程中翻書及百度學(xué)習(xí)的東西######
1、linear-gradient()線性漸變函數(shù)
語(yǔ)法：linear-gradient( direction, color-stop1, color-stop2...)
direction：漸變方向，可以方向也可以是角度
color-stop：起止顏色，可多個(gè)
2 、radial-gradient()徑向漸變函數(shù)
語(yǔ)法：radial-gradient( shape , size, direction, start-color, ..., stop-color )
shape：漸變形狀，包含兩個(gè)值 ellipse（橢圓，默認(rèn)值）和 circle（圓）
除此之外，還可以用兩個(gè)參數(shù)值確定圓心位置（分別為 x, y 值），例如radial-gradient( 100px 20px / 50% 40% , ... )
size：漸變半徑（指定半徑長(zhǎng)度），包含四個(gè)值，
farthest-corner（默認(rèn)）：從圓心到離圓心最遠(yuǎn)的角
nearest-corner：從圓心到離圓心最近的角
farthest-side：從圓心到離圓心最遠(yuǎn)的邊
nearest-side：從圓心到離圓心最近的邊
direction：漸變的開始位置，包含三個(gè)值
center：中間為徑向漸變圓心的縱坐標(biāo)值
top：頂部為徑向漸變圓心的縱坐標(biāo)值
bottom：底部為徑向漸變的縱坐標(biāo)值
start-color,...,stop-color：起止顏色，可多個(gè)
3、calc（）函數(shù)
calc() 函數(shù)能夠計(jì)算 <div> 元素寬度，支持 “+”，“-”，“*”，“/”四種運(yùn)算
在本例中使用的區(qū)域：
.group{
...
width: calc((100% - 13rem)/2);
...
}
“100%” 是其父級(jí)的寬度，“13rem” 是中間大菱形所占寬度，“/2” 之后將平均分配兩個(gè)寬度
4、clip 剪輯屬性
指定一個(gè)絕對(duì)定位的元素，該尺寸應(yīng)該是可見的，該元素被剪裁成這種形狀并顯示。
注意：一定要有絕對(duì)定位（position:absolute），其次，若在此之前先有overflow:visible則 clip 屬性不生效。另外，clip屬性可以設(shè)置裁剪框 rect(top, right, bottom, left) 或 不進(jìn)行裁剪 auto，并且clip屬性只能設(shè)置 rect() 矩形框。
5、text-shadow屬性
包含四個(gè)值：
h-shadow：必填。水平位置陰影，可負(fù)。
v-shadow：必填。垂直位置陰影，可負(fù)。
blur：選填。模糊距離。
color：選填，陰影顏色。
box-shadow 中多兩個(gè)值分別是spread（陰影大小） 和 inset（3D邊框），但是一般比較常用的用法還是與 text-shadow 用法一致
最后，記錄一下今天看了一個(gè)短視頻的心情：即使年少時(shí)再多棱角，經(jīng)歷過(guò)社會(huì)以及生活之后也會(huì)變得圓滑。
