利用CSS3動(dòng)畫實(shí)現(xiàn)圓圈由小變大向外擴(kuò)散的效果實(shí)例

發(fā)布時(shí)間：2018-09-10 17:17:30 作者：佚名

這篇文章主要給大家介紹了關(guān)于如何利用CSS3動(dòng)畫實(shí)現(xiàn)圓圈由小變大向外擴(kuò)散效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要給大家分享的是關(guān)于利用CSS3動(dòng)畫實(shí)現(xiàn)圓圈由小變大向外擴(kuò)散的效果實(shí)例，文中涉及到 CSS3 的動(dòng)畫（animation）、2D 轉(zhuǎn)換（transform: scale）

css3中新增了一個(gè)animation的屬性，該屬性類似于創(chuàng)建一個(gè)animation對(duì)象

如：animation: bounce 2.0s infinite ease-in-out;

animation有以下幾個(gè)參數(shù)：

屬性	描述	CSS
animation	所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。	3
animation-name	規(guī)定 @keyframes 動(dòng)畫的名稱。	3
animation-duration	規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。	3
animation-timing-function	規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。	3
animation-delay	規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。	3
animation-iteration-count	規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。	3
animation-direction	規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。	3
animation-play-state	規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。	3
animation-fill-mode	規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。	3

CSS 3 中2D轉(zhuǎn)換的實(shí)現(xiàn)用到兩個(gè)屬性：

屬性	描述	CSS
transform	向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。	3
transform-origin	指定變換的基點(diǎn)的位置。	3

靜態(tài)效果圖：

具體如代碼所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
@keyframes warn {
 0% {
  transform: scale(0);
  opacity: 0.0;
 }
 25% {
  transform: scale(0);
  opacity: 0.1;
 }
 50% {
  transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  transform: scale(1);
  opacity: 0.0;
 }
}
@-webkit-keyframes "warn" {
 0% {
  -webkit-transform: scale(0);
  opacity: 0.0;
 }
 25% {
  -webkit-transform: scale(0);
  opacity: 0.1;
 }
 50% {
  -webkit-transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  -webkit-transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  -webkit-transform: scale(1);
  opacity: 0.0;
 }
}
 
.container {
 position: relative;
 width: 40px;
 height: 40px;
 border: 1px solid #000;
}
/* 保持大小不變的小圓圈  */
.dot {
 position: absolute;
 width: 6px;
 height: 6px;
 left: 15px;
 top: 15px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border: 2px solid red;
 border-radius: 20px;
 z-index: 2;
}
/* 產(chǎn)生動(dòng)畫（向外擴(kuò)散變大）的圓圈  */
.pulse {
 position: absolute;
 width: 24px; 
 height: 24px;
 left: 2px;
 top: 2px;
 border: 6px solid red;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 z-index: 1;
 opacity: 0;
 -webkit-animation: warn 3s ease-out;
 -moz-animation: warn 3s ease-out;
 animation: warn 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}
</style>
 
</head>
 
<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</body>
</html>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。