近期因为自己想做一个项目的登陆界面，想要实现一些效果，然后在打游戏的时候看到了王者荣耀匹配的界面效果很不错，所以在百度上找了一下实现的代码，也跟着敲了一下，顺便能够让我这个菜鸡熟悉一下一些 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>
一些在学习过程中翻书及百度学习的东西######
1、linear-gradient()线性渐变函数
语法：linear-gradient( direction, color-stop1, color-stop2...)
direction：渐变方向，可以方向也可以是角度
color-stop：起止颜色，可多个
2 、radial-gradient()径向渐变函数
语法：radial-gradient( shape , size, direction, start-color, ..., stop-color )
shape：渐变形状，包含两个值 ellipse（椭圆，默认值）和 circle（圆）
除此之外，还可以用两个参数值确定圆心位置（分别为 x, y 值），例如radial-gradient( 100px 20px / 50% 40% , ... )
size：渐变半径（指定半径长度），包含四个值，
farthest-corner（默认）：从圆心到离圆心最远的角
nearest-corner：从圆心到离圆心最近的角
farthest-side：从圆心到离圆心最远的边
nearest-side：从圆心到离圆心最近的边
direction：渐变的开始位置，包含三个值
center：中间为径向渐变圆心的纵坐标值
top：顶部为径向渐变圆心的纵坐标值
bottom：底部为径向渐变的纵坐标值
start-color,...,stop-color：起止颜色，可多个
3、calc（）函数
calc() 函数能够计算 <div> 元素宽度，支持 “+”，“-”，“*”，“/”四种运算
在本例中使用的区域：
.group{
...
width: calc((100% - 13rem)/2);
...
}
“100%” 是其父级的宽度，“13rem” 是中间大菱形所占宽度，“/2” 之后将平均分配两个宽度
4、clip 剪辑属性
指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
注意：一定要有绝对定位（position:absolute），其次，若在此之前先有overflow:visible则 clip 属性不生效。另外，clip属性可以设置裁剪框 rect(top, right, bottom, left) 或 不进行裁剪 auto，并且clip属性只能设置 rect() 矩形框。
5、text-shadow属性
包含四个值：
h-shadow：必填。水平位置阴影，可负。
v-shadow：必填。垂直位置阴影，可负。
blur：选填。模糊距离。
color：选填，阴影颜色。
box-shadow 中多两个值分别是spread（阴影大小） 和 inset（3D边框），但是一般比较常用的用法还是与 text-shadow 用法一致
最后，记录一下今天看了一个短视频的心情：即使年少时再多棱角，经历过社会以及生活之后也会变得圆滑。
网友评论