html frame
<div class="home">
<div class="background1"></div>
<div class="background2"></div>
<div class="background3"></div>
</div>
css style
.home {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;/* 下面的图片太大,一直旋转带来了宽度撑高 */
}
.background1 {
width: 30rem;
height: 30rem;
background: url("../assets/lbx.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.5;
animation: rotate1 15s linear infinite;
}
.background2 {
width: 27rem;
height: 27rem;
background: url(../assets/jt.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
opacity: 0.8;
animation: rotate2 15s linear infinite;
}
.background3 {
width: 24.6rem;
height: 24.6rem;
background: url(../assets/map.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
opacity: 0.8;
}
/* 围绕圆心旋转-从0-360度 */
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate2 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
Effect
html code
<div class="leftHeader">
<div class="border1"></div>
<div class="border2"></div>
<div class="border3"></div>
<div class="border4"></div>
</div>
css code
.leftHeader {
width: 100%;
height: 12.5rem;
position: relative;
.border1 {
width: 0.625rem;
height: 0.625rem;
position: absolute;
top: -0.0938rem;
left: -0.0938rem;
border-left: 0.125rem solid #3780a9;
border-top: 0.125rem solid #3780a9;
}
.border2 {
width: 0.625rem;
height: 0.625rem;
position: absolute;
top: -0.0938rem;
right: -0.0938rem;
border-right: 0.125rem solid #3780a9;
border-top: 0.125rem solid #3780a9;
}
.border3 {
width: 0.625rem;
height: 0.625rem;
position: absolute;
bottom: -0.0938rem;
left: -0.0938rem;
border-bottom: 0.125rem solid #3780a9;
border-left: 0.125rem solid #3780a9;
}
.border4 {
width: 0.625rem;
height: 0.625rem;
position: absolute;
bottom: -0.0938rem;
right: -0.0938rem;
border-right: 0.125rem solid #3780a9;
border-bottom: 0.125rem solid #3780a9;
}