純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫的示例代碼
我要評(píng)論本文主要介紹了純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫的示例代碼，分享給大家，具體如下：
效果圖：
代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫</title>
<style>
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);
}
</style>
</head>
<body>
<div class="circle-wrap">
<div class="circle">
<div class="big-circle"></div>
<div class="small-circle"></div>
</div>
</div>
<div class="smallcircle2"></div>
<div class="bigcircle2"></div>
<div class="item"></div>
</body>
</html>
這個(gè)效果的具體實(shí)現(xiàn)主要是用到了CSS3 的animation
它共有8個(gè)屬性：
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。
用來(lái)定義一個(gè)動(dòng)畫的名稱。
如果要設(shè)置幾個(gè)animation給一個(gè)元素，我們只需要以列表的形式，用逗號(hào)“，”隔開
animation-duration 動(dòng)畫時(shí)長(zhǎng)
用來(lái)指定元素播放一個(gè)周期的動(dòng)畫所持續(xù)的時(shí)間長(zhǎng)，單位為秒（s）或毫秒（ms），默認(rèn)值為0
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 “ease”。
linear 規(guī)定以相同速度開始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。
animation-delay 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。允許負(fù)值，動(dòng)畫跳過(guò) 2 秒進(jìn)入動(dòng)畫周期，也就是從2s的動(dòng)畫開始
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 “normal”。
animation-fill-mode 規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 “running”。
綜合起來(lái)簡(jiǎn)寫
animation : name duration timing-function delay iteration-count direction fill-mode play-state
原文：https://blog.csdn.net/qq_34576876/article/details/95532946
https://blog.csdn.net/weixin_42541698/article/details/102686976
到此這篇關(guān)于純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫的示例代碼的文章就介紹到這了,更多相關(guān)CSS3圓圈動(dòng)態(tài)發(fā)光內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)的示例代碼
這篇文章主要介紹了CSS3實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)，本文通過(guò)實(shí)例代碼給大家介紹了左上角實(shí)現(xiàn)紅色三角號(hào)標(biāo)識(shí)的代碼，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要2020-10-15
css實(shí)現(xiàn)帶箭頭和圓點(diǎn)的輪播
這篇文章主要介紹了css實(shí)現(xiàn)帶箭頭和圓點(diǎn)的輪播的相關(guān)資料,當(dāng)鼠標(biāo)移入圖片、圓點(diǎn)和方向鍵時(shí)，停止輪播，移除恢復(fù)。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-28Dreamweaver項(xiàng)目列表前面的項(xiàng)目符號(hào)去掉小圓點(diǎn)?
Dreamweaver每次新建醒目列表都默認(rèn)添加黑色的小圓點(diǎn)，想用別的項(xiàng)目符號(hào)代替或者直接去掉，該怎么辦呢？下面分享Dreamweaver項(xiàng)目列表前面的小圓點(diǎn)去掉的教程，需要的朋友可2015-11-19HTML5 Canvas繪制圓點(diǎn)虛線實(shí)例
這篇文章主要介紹了HTML5 Canvas繪制圓點(diǎn)虛線實(shí)例,HTML5并未提供畫虛線的方法,本文是根據(jù)Stack Overflow的方法修改而來(lái),需要的朋友可以參考下2015-01-01
