純CSS打造邊框亮點移動效果

阿新 • • 發佈：2019-01-30

引言

在足球和籃球比賽的電視轉播中，記分版在剛彈出時，通常會在左下角和右上角出現兩個亮點，並沿著記分版邊緣移動一段距離，最後消失。這種動畫效果可以幫助觀眾更加關注相對單調的記分版。

最近正好在研究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: 2 
px;
  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%;
}
.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

效果展示

初始階段
中途階段
即將完成
最終完成

純CSS打造邊框亮點移動效果

引言在足球和籃球比賽的電視轉播中，記分版在剛彈出時，通常會在左下角和右上角出現兩個亮點，並沿著記分版邊緣移動一段距離，最後消失。這種動畫效果可以幫助觀眾更加關注相對單調的記分版。最近正好在研究CSS動畫，一直在嘗試使用涉及@keyframes的純CSS來

【CSS】純css實現立體擺放圖片效果

1. 元素的 width/height/padding/margin 的百分比基準設定一個元素 width/height/padding/margin 的百分比的時候，大家可知道基準是什麼？舉個栗子： .parent { width: 200px; height: 100px; } .ch

用純CSS實現載入中動畫效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"&

純css實現的流星雨的效果

檢視效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

純CSS實現影象滑鼠懸停效果

前端開發whqet,csdn,王海慶,whqet,前端開發專家今天來看一組純CSS實現的滑鼠懸停效果，線上研究程式碼點效果一、效果二、效果三，下載收藏點這裡，效果預覽點這裡。效果1效果1的html檔案<div class="pic"> <img src="

CSS3 - vue中純css實現柱狀圖表效果

背景以前我們製作柱狀圖都用echarts或者其他同類型的圖表外掛這次是個移動端的需求，而且這個圖表需要動畫使用echarts就會顯得過重，而且動畫達不到我想要的效果（主要是我自己愚蠢想不到好的動畫辦法）。先來看下效果圖：幾個柱狀圖分數不滿時：幾個滿分柱圖：還

純css竟可以做出邊框這樣長寬度的過渡效果

語法 style property abs pan 兼容 css3 min htm 邊框效果如下：鼠標移到下面方形，就有效果 .customS { width: 200px; height: 200px; background-color: #ccc; position:

45個純 CSS 實現的精美邊框效果【附原始碼】

確實覺得很好，但是貼上不過來，所以把連線分享給大家了。地址：http://www.cnblogs.com/lhb25/archive/2012/08/29/css-border-and-box-effect-a.html 地址：http://www.cnblogs

使用純css實現波浪效果

波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分

純css寫出愛心版加載效果，等待加載也是一種享受

前端 css 加載現在互聯網時代網站何其多，各有各得風格，但是什麽樣的風格能留住用戶的停留觀看呢？就從加載來說，很多加載效果都是同一種風格可能用戶經常逛網站早已經習慣，要是你的加載時間比其他網站時間長，效果還是一樣的，可能就會關掉你的網站去其他網站觀看，但是如果你的加載效果別具一格，有特點，可

純CSS動畫打造~會動的小球

HTML css 會動的小球，設計html,css知識點，另外動畫是完全用css做的，很簡單便捷哦~這只是一個小小的案例，以後為大家提供更多的案例！！會動的小球<!DOCTYPE html> **<html> <head> <meta charset="

純css實現打字效果

idt strong htm rap 混合實現有時 append com 概述很早以前就在別人的博客上面看到打字動畫了，覺得非常炫酷，以為是用js做的，找了半天也沒找到js在哪裏。今天看《css揭秘》，碰巧看到書上打字動畫的實現了，而且是純css實現的！我參考這本書把

純css進度條效果

frame lock 20px har div -html box overflow order <!DOCTYPE html> <html lang="zh"> <head> <meta c

純css抖動效果

ati pen nbsp -name 技術 -m eve div mat HTML： 1 <button class="shake">按鈕</button> CSS： 1 .shake{ 2 width:

純CSS導航欄下劃線跟隨效果

position ans bubuko 導航 tran css width ansi none 參考文章 <ul> <li>111</li> <li>2222</li>

純CSS程式碼實現翻轉選單的炫酷效果

1、思路分析滑鼠移入選單出現並翻轉滑鼠移出收回選單 2、完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta char

純CSS程式碼實現手風琴效果

這裡我們使用最簡單和最少的程式碼實現。 1、準備圖片相同尺寸六張 2、詳細程式碼如下手風琴效果的原理是：當滑鼠移入的時候，改變ul下li的寬度，方案簡單可行。 <!DOCTYPE html> <html lang="en"> <hea

手風琴實現效果純css

在做css實現手風琴的效果過程中，發現了一個有趣的現象：當使用背景圖片的時候，最後一個圖片的animation效果會出現問題。我相出的原因是，因為圖片是作為li的背景圖片的，而當hover時候li的寬度變了，背景圖片的改變是一樣快的。但是使用img標籤，雖然li的寬度變了，但是i

純css實現氣泡效果

先上程式碼： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; background-color: #ffdce0; border-color: #cea0a5; displa

邊框教程，用線上PS打造垂直照片面板效果

　　本篇教程通過迅捷線上圖片編輯器打造垂直照片面板效果，看慣了千篇一律的照片，不妨給照片換個調調，新增簡約的邊框，使照片呈現不一樣是感覺，這種操作比較簡單，初學者也可以進行嘗試製作，利用好圖層樣式就可以很好的完成，可以用提供的素材圖，也可以拿自己喜歡的圖片進行練習，同學們一起來學習一下吧。使用

純CSS打造邊框亮點移動效果

引言

HTML程式碼

CSS說明

效果展示

相關推薦