css3光束_純CSS3實作圓圈動态發光特效動畫

效果圖：

代碼：

純CSS3實作圓圈動态發光特效動畫

body {

background-color: #000000;

}

@keyframes twinkling {

0% {

opacity: 0.2;

transform: scale(1);

}

50% {

opacity: 0.5;

transform: scale(1.12);

}

100% {

opacity: 0.2;

transform: scale(1);

}

}

.circle-wrap {

position: absolute;

left: 100px;

top: 100px;

}

.circle {

position: relative;

width: 24px;

height: 24px;

}

.small-circle {

border-radius: 50%;

width: 12px;

height: 12px;

background: #FF0033;

position: absolute;

}

.big-circle {

position: absolute;

top: -6px;

left: -6px;

width: 100%;

height: 100%;

border-radius: 50%;

background: #FF0033;

animation: twinkling 1s infinite ease-in-out;

animation-fill-mode: both;

}

@keyframes scale {

0% {

transform: scale(1)

}

50%,

75% {

transform: scale(3)

}

78%,

100% {

opacity: 0

}

}

@keyframes scales {

0% {

transform: scale(1)

}

50%,

75% {

transform: scale(2)

}

78%,

100% {

opacity: 0

}

}

.smallcircle2 {

position: absolute;

width: 12px;

height: 12px;

background-color: #ffffff;

border-radius: 50%;

top: 100px;

left: 200px;

}

.smallcircle2:before {

content: '';

display: block;

width: 12px;

height: 12px;

border-radius: 50%;

opacity: .4;

background-color: #ffffff;

animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);

}

.bigcircle2 {

position: absolute;

width: 12px;

height: 12px;

border-radius: 50%;

opacity: .4;

background-color: #ffffff;

top: 100px;

left: 200px;

animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);

}

@keyframes scaless {

0% {

transform: scale(1)

}

50%,

75% {

transform: scale(3)

}

78%,

100% {

opacity: 0

}

}

.item {

position: absolute;

width: 14px;

height: 14px;

background-color: #FFFF00;

border-radius: 50%;

top: 150px;

left: 100px;

}

.item:before {

content: '';

display: block;

width: 14px;

height: 14px;

border-radius: 50%;

opacity: .7;

background-color: #FFFF00;

animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);

}

這個效果的具體實作主要是用到了CSS3 的animation

它共有8個屬性：

animation-name 規定 @keyframes 動畫的名稱。

用來定義一個動畫的名稱。

如果要設定幾個animation給一個元素，我們隻需要以清單的形式，用逗号“，”隔開

animation-duration 動畫時長

用來指定元素播放一個周期的動畫所持續的時間長，機關為秒(s)或毫秒(ms)，預設值為0

animation-timing-function 規定動畫的速度曲線。預設是 “ease”。

linear規定以相同速度開始至結束的過渡效果(等于 cubic-bezier(0,0,1,1))。 ease規定慢速開始，然後變快，然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in規定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out規定以慢速結束的過渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out規定以慢速開始和結束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n)在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

animation-delay 規定動畫何時開始。預設是 0。允許負值，動畫跳過 2 秒進入動畫周期，也就是從2s的動畫開始

animation-iteration-count 規定動畫被播放的次數。預設是 1

animation-direction 規定動畫是否在下一周期逆向地播放。預設是 “normal”。

animation-fill-mode 規定動畫在播放之前或之後，其動畫效果是否可見。

animation-play-state 規定動畫是否正在運作或暫停。預設是 “running”。

綜合起來簡寫

animation : name duration timing-function delay iteration-count direction fill-mode play-state