简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

分享一个CSS3圆圈放大缩小循环动画的效果代码

零下一度
Lepaskan： 2017-05-12 13:59:52
asal
6411 orang telah melayarinya

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>
Salin selepas log masuk

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

Atas ialah kandungan terperinci 分享一个CSS3圆圈放大缩小循环动画的效果代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
CSS3，动画
sumber：php.cn
Artikel sebelumnya：利用css如何让div处于永远居中状态？ Artikel seterusnya：详解css中的z-index（二）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Mengapa meninggalkan 0ms tidur mematahkan peralihan css saya? Saya cuba melaksanakan animasi FLIP untuk melihat sama ada saya memahaminya dengan betul. ...
daripada 2024-04-06 16:29:50
0
2
490
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Animasi kad hover imej menggunakan CSS Tailwind tidak berfungsi seperti yang diharapkan. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
daripada 2024-04-06 13:43:17
0
1
356
Kurangkan kelegapan imej latar belakang tatal, hadkan kelegapan minimum Saya cuba mendapatkan imej latar belakang untuk mengurangkan kelegapan pada tatal dan seka...
daripada 2024-04-04 23:50:53
0
1
1329
Panduan React.js untuk menggunakan elemen pseudo `:selepas` dengan betul pada komponen yang digayakan Saya menjumpai animasi garis bawah yang cantik ini <ul><li><ahref="#&q...
daripada 2024-04-04 22:28:08
0
1
1322
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！