简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

分享一個CSS3圓圈放大縮小循環動畫的效果代碼

零下一度
發布： 2017-05-12 13:59:52
原創
6411 人瀏覽過

CSS3圓圈動畫放大縮小循環動畫效果，特效簡單又漂亮，看著聽不錯的，有興趣的朋友們可以來看

#代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动画效果</title>
<style>

.dot {
margin:150px auto;
width:200px;
height:200px;
background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:&#39;ripple&#39;;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
0% {

opacity:0.35;
width:190px;
height:190px;
}
100% {
opacity: 0.2;
width:250px;
height:250px;
}
}
</style>
</head>

<body>
	<p class="dot"></p>
</body>
</html>
登入後複製

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

3. php.cn獨孤九賤（2）－css影片教學

以上是分享一個CSS3圓圈放大縮小循環動畫的效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
CSS3，动画
來源：php.cn
上一篇：利用css如何讓div處於永遠居中狀態？ 下一篇：詳解css中的z-index（二）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
為什麼省略 0ms sleep 會破壞我的 css 轉換？ 我正在嘗試實現FLIP動畫，看看我是否理解正確。在這個程式碼筆中（請原諒糟糕的程式碼，我只是在亂搞），如果我註解掉睡眠，平滑過渡將不再有效。 div突然改變位置。這很奇怪，因為睡眠...
來自於 2024-04-06 16:29:50
0
2
490
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
使用 CSS Tailwind 的圖片懸停卡動畫未如預期運作。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
來自於 2024-04-06 13:43:17
0
1
356
降低捲動背景影像的不透明度，限制最小不透明度 我試圖讓背景圖像減少滾動時的不透明度，一旦離開登陸頁面，使用vanillajavascript將其降至最低0.5。我嘗試在滾動函數中添加Math.max()使其僅降至0.5，但它會...
來自於 2024-04-04 23:50:53
0
1
1329
正確應用`:after`偽元素到styled components的React.js指南 我發現了這個漂亮的底線動畫<ul><li><ahref="#">關於</a></li><li&...
來自於 2024-04-04 22:28:08
0
1
1322
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！