body,html {
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:rgb(
131,247,131)
}
main {
width:300px;
height:150px;
/* 定义边框大小 样式,此处为配合下面的边框渐变效果所以不加颜色 */
border:0px solid;
/* 定义边框渐变样式 */
border-image:linear-gradient(
-45deg,white 50%,greenyellow 50%,greenyellow 100%)
30 30;
display:flex;
align-items:center;
justify-content:center;
/* 定义标签边框属性 */
box-sizing:border-box;
transition:0.5s;
}
main:hover {
border:25px solid;
border-image:linear-gradient(
-45deg,white 50%,greenyellow 50%,greenyellow 100%)
30 30;
}
#ma {
width:250px;
height:100px;
/* background:red;*/
position:relative;
}
section {
width:150px;
height:100px;
background:white;
position:absolute;
left:50px;
z-index:100;
font-size:25px;
font-weight:bold;
text-align:center;
line-height:100px;
/* 设置字符之间有0.2em的空隙间隔 */
letter-spacing:0.2em;
cursor:pointer;
/* 定义标签背景渐变 */
background:linear-gradient(
-45deg,white 50%,greenyellow 50%,greenyellow 100%)
color:rgb(
170,170,167)
transition:0.5s;
animation:dong 0.1s linear infinite alternate;
}
@keyframes dong {
0% {
transform:translateX(
-10px)
}
50% {
transform:translateX(
0px)
}
100% {
transform:translateX(
10px)
}
}main:hover section {
opacity:0;
z-index:87;
transform:scale(
1.5)
animation-play-state:paused;
}
.ma {
width:150px;
height:100px;
background:white;
position:absolute;
left:50px;
z-index:99;
/* 设置过渡的返回时间 */
transition-duration:0.5s;
text-align:center;
line-height:100px;
font-size:35px;
letter-spacing:0.2em;
cursor:default;
opacity:0;
color:transparent;
/* 定义字符内的字母都是大写 */
text-transform:uppercase;
font-family:-apple-system,BlinkMacSystemFont,'
Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'
Open Sans','
Helvetica Neue',sans-serif;
}
main:hover .ma {
transition:0.7s ease-in-out;
left:0;
opacity:1;
color:rgb(
85,84,84)
}
#refresh {
width:100px;
height:100px;
position:absolute;
right:50px;
z-index:88;
transition-duration:0.5s;
border:18px solid transparent;
background:greenyellow;
font-size:25px;
color:white;
cursor:pointer;
box-sizing:border-box;
opacity:0;
}
#refresh:hover {
border:0px solid white;
}
main:hover #refresh {
transition:0.7s ease-in-out;
right:0;
opacity:1;
}