Rumah > Artikel > hujung hadapan web > 分享一个CSS3圆圈放大缩小循环动画的效果代码
分享一个CSS3圆圈放大缩小循环动画的效果代码
- 零下一度asal
- 2017-05-12 13:59:526426semak imbas
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:'ripple';/*动画属性名，也就是我们前面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在线手册
Atas ialah kandungan terperinci 分享一个CSS3圆圈放大缩小循环动画的效果代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
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 sebelumnya：利用css如何让div处于永远居中状态？Artikel seterusnya：详解css中的z-index（二）