您的位置：首页 > Web前端 > CSS

纯CSS打造边框亮点移动效果

2017-05-10 23:44 573 查看

引言

在足球和篮球比赛的电视转播中，记分版在刚弹出时，通常会在左下角和右上角出现两个亮点，并沿着记分版边缘移动一段距离，最后消失。这种动画效果可以帮助观众更加关注相对单调的记分版。

最近正好在研究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: 0 0 3px 2px #FFD700;
width: 5px;
height: 5px;
background-color: #FFD700;
border-radius: 50<
d24f
/span>%;
}
.shine::before {
animation:leftShine 6s linear;
-moz-animation:leftShine 6s linear; /* Firefox */
-webkit-animation:leftShine 6s linear; /* Safari and Chrome */
-o-animation:leftShine 6s linear; /* Opera */
}
.shine::after {
animation:rightShine 6s linear;
-moz-animation:rightShine 6s linear; /* Firefox */
-webkit-animation:rightShine 6s linear; /* Safari and Chrome */
-o-animation:rightShine 6s linear; /* Opera */
}
/* Animation for shine point on left */
@keyframes leftShine {
0%   {top: 57px; left: 27px;}
25%  {top: 57px; left: -2px;}
75%  {top: -2px; left: -2px;}
100% {top: -2px; left: 27px;}
}
/* Firefox */
@-moz-keyframes leftShine {
0%   {top: 57px; left: 27px;}
25%  {top: 57px; left: -2px;}
75%  {top: -2px; left: -2px;}
100% {top: -2px; left: 27px;}
}
/* Safari 和 Chrome */
@-webkit-keyframes leftShine {
0%   {top: 57px; left: 27px;}
25%  {top: 57px; left: -2px;}
75%  {top: -2px; left: -2px;}
100% {top: -2px; left: 27px;}
}
/* Opera */
@-o-keyframes leftShine {
0%   {top: 57px; left: 27px;}
25%  {top: 57px; left: -2px;}
75%  {top: -2px; left: -2px;}
100% {top: -2px; left: 27px;}
}
/* Animation for shine point on right */
@keyframes rightShine {
0%   {top: -2px; left: 268px;}
25%  {top: -2px; left: 297px;}
75%  {top: 57px; left: 297px;}
100% {top: 57px; left: 268px;}
}
/* Firefox */
@-moz-keyframes rightShine {
0%   {top: -2px; left: 268px;}
25%  {top: -2px; left: 297px;}
75%  {top: 57px; left: 297px;}
100% {top: 57px; left: 268px;}
}
/* Safari 和 Chrome */
@-webkit-keyframes rightShine {
0%   {top: -2px; left: 268px;}
25%  {top: -2px; left: 297px;}
75%  {top: 57px; left: 297px;}
100% {top: 57px; left: 268px;}
}
/* Opera */
@-o-keyframes rightShine {
0%   {top: -2px; left: 268px;}
25%  {top: -2px; left: 297px;}
75%  {top: 57px; left: 297px;}
100% {top: 57px; left: 268px;}
}
</style>
</head>
<body>
<div class="shine"></div>
</body>
</html>


CSS说明

上述代码只涉及很简单的html，绝大部分是CSS的内容。

- 使用.shine::before和.shine::after来分别处理左下角和右上角两个亮点的移动

- 设定好亮点的背景色，并设置border-radius:50%来将其改为圆点，采用box-shadow样式加入模糊来模拟光线散射效果

- 通过leftShine和rightShine两个keyframes效果来分别指定左右两个点的动画路径，具体说明请自行参阅w3cschool

效果展示

初始阶段



中途阶段



即将完成



最终完成

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航