console
<html>
<body>
<head>
</head>
<div class="arrow_box">
<img src="https://pub-media.hangyanshe.com/avatar/cdlkjhbf864i4fk7nvcg.png" alt="">
</div>
<div class="arrow_box">
<img src="https://pub-media.hangyanshe.com/avatar/c1hjdpv8mo4foss9eugg.jpg" alt="">
</div>
</body>
</html>
body{
background-color:#000;
}
img{
width: 100%;
}
.arrow_box {
margin:20px;
width:300px;
height:300px;
animation: glow 3s ease-out infinite;
border: 1px solid rgba(102, 255, 102,0.2);
}
@keyframes glow {
0% {
box-shadow: 0 0 1px rgba(0, 255, 0, 0.2), 0 1px 0 #6f6;
}
25%{
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4),-1px 0 0 #6f6;
}
50%{
box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),0 -1px 0 #6f6;
}
75%{
box-shadow: 0 0 30px rgba(0, 255, 0, 0.8),1px 0 0 #6f6;
}
100% {
box-shadow: 0 0 15px rgba(0, 255, 0, 0.3), 0 1px 0 #6f6;
}
}