引言
在足球和篮球比赛的电视转播中,记分版在刚弹出时,通常会在左下角和右上角出现两个亮点,并沿着记分版边缘移动一段距离,最后消失。这种动画效果可以帮助观众更加关注相对单调的记分版。
最近正好在研究CSS动画,一直在尝试使用涉及@keyframes的纯CSS来做出这个效果,终于成功实现了。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框动画</title>
<style type="text/css">
.shine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 300px;
height: 60px;
margin: auto;
background-color: #333;
box-shadow: inset 0 0 2px 5px #8B7500;
border-radius: 2px;
color: #FFD700;
}
.shine::before, .shine::after {
position: absolute;
top: 2px;
bottom: 0;
left: 2px;
right: 0;
content: '';
z-index: -1;
margin: 0;
box-shadow: