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

最新推荐文章于 2024-06-28 14:24:07 发布

Atlantisfall

最新推荐文章于 2024-06-28 14:24:07 发布

阅读量5.1k

点赞数 3

分类专栏：前端文章标签： css html 动画

本文链接：https://blog.csdn.net/qq_26306309/article/details/71598886

版权

本文介绍了如何使用CSS动画创建类似体育赛事中记分版边框亮点移动的效果。通过HTML和CSS代码，详细讲解了如何设置@keyframes动画路径，利用.shine伪元素及box-shadow实现亮点和光线效果。最终展示了动画从开始到结束的三个阶段。

摘要由CSDN通过智能技术生成

引言

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

最近正好在研究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.47元/天解锁文章

Atlantisfall

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯CSS打造边框亮点移动效果

纯CSS打造边框亮点移动效果在足球和篮球比赛的电视转播中，记分版在刚弹出时，通常会在左下角和右上角出现两个亮点，并沿着记分版边缘移动一段距离，最后消失。这种动画效果可以帮助观众更加关注相对单调的记分版。最近正好在研究CSS动画，一直在尝试使用涉及@keyframes的纯CSS来做出这个效果，最终成功实现了。
复制链接

扫一扫

专栏目录