<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
}
.btn {
/* border: 1px solid #d49dbf; */
300px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
color: #d49dbf;
font-size: 30px;
letter-spacing: 10px;
/* text-shadow: 0 0 4px #fff; */
position: relative;
overflow: hidden;
}
.btn div {
position: absolute;
background-color: #d49dbf;
}
.btn .left {
100%;
height: 4px;
top: 0;
left: -100%;
animation: leftRun 2s linear 0s infinite;
}
@keyframes leftRun {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.top {
4px;
height: 100%;
top: -100%;
right: 0;
animation: topRun 2s linear 0.5s infinite;
}
@keyframes topRun {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.right {
100%;
height: 4px;
bottom: 0;
right: -100%;
animation: rightRun 2s linear 1s infinite;
}
@keyframes rightRun {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.bottom {
4px;
height: 100%;
bottom: -100%;
left: 0;
animation: bottomRun 2s linear 1.5s infinite;
}
@keyframes bottomRun {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>
</head>
<body>
<div class="btn">
<span>点击抽奖</span>
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
