注:由于暂时不能上传gif，而且动画制作着实有点粗糙，新手，大家不喜勿喷。
该动画是直接设置的页面一开启，就实现。
如果想在点击事件中实现，可以利用js代码进行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>陈不知代码</title>
<style>
* {
margin: 0;
padding: 0;
}
.download {
width: 150px;
height: 50px;
border: 2px solid red;
margin: 100px auto;
border-radius: 10px;
z-index: 9999;
animation: covercolor 1s infinite;
animation-fill-mode: forwards;
}
.left {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: red;
animation: colorgreen 1s infinite;
animation-fill-mode: forwards;
}
.right {
float: left;
position: relative;
width: 40px;
height: 50px;
}
.leftarr {
position: absolute;
top: 24px;
left: 13.2px;
width: 1.5px;
height: 9px;
background-color: red;
transform: rotate(135deg);
animation: changecolor 1s infinite;
animation-fill-mode: forwards;
}
.rightarr {
position: absolute;
top: 24.2px;
left: 20px;
width: 1.5px;
height: 9px;
background-color: red;
transform: rotate(45deg);
animation: arrowan 1s infinite;
animation-fill-mode: forwards;
}
.topline {
position: absolute;
top: -3.4px;
left: 16.2px;
width: 5px;
height: 18px;
background-color: #fff;
transform: rotate(180deg);
animation: linean 1s infinite;
animation-fill-mode: forwards;
z-index: -1
}
.line {
position: absolute;
top: 14.5px;
left: 17px;
width: 1.5px;
height: 18px;
background-color: red;
transform: rotate(180deg);
animation: changecolor 1s infinite;
animation-fill-mode: forwards;
z-index: -2;
}
@keyframes arrowan {
from {}
to {
top: 18.7px;
left: 22.9px;
height: 15px;
background-color: greenyellow;
}
}
@keyframes linean {
from {}
to {
top: 12px;
}
}
@keyframes covercolor {
from {}
to {
border: 2px solid greenyellow;
}
}
@keyframes changecolor {
from {}
to {
color: greenyellow;
background-color: greenyellow;
}
}
@keyframes colorgreen {
from {}
to {
color: greenyellow;
}
}
@keyframes bodercolor {
from {}
to {
border: 1px solid greenyellow;
}
}
</style>
</head>
<body>
<div class="download">
<div class="left">
Download
</div>
<div class="right">
<div class="leftarr"></div>
<div class="rightarr"></div>
<div class="topline"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>