CSS3圆圈动画放大缩小循环动画效果

老白 1个月前 88浏览 0评论

 CSS3圆圈动画放大缩小循环动画效果 CSS学习 第1张

今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图!

1、简单放大缩小循环!

<!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: #6190e8;
 border-radius: 50%;
 /*box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/
 -webkit-animation-name: 'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/
 -webkit-animation-duration: .5s;/*动画持续时间*/
 -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>
<div class="dot"></div>
</body>
</html>

 2、原地放大缩小,通过CSS进行调整!

CSS3圆圈动画放大缩小循环动画效果 CSS学习 第2张

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动原地放大缩小</title>
<style>
 *{padding: 0;margin: 0;}
 .pagebar{margin: 0 auto;width: 30px;}
 .page2{}
 .dot {
 margin: 0 auto;
 width: 30px;
 height: 30px;
 background-color: #6190e8;
 border-radius: 50%;
 /*box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/
 -webkit-animation-name: 'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/
 -webkit-animation-duration: .5s;/*动画持续时间*/
 -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% {margin-left: 15px;margin-top: 15px;width:0;height:0;}
 100% {margin-left: 0;margin-top: 0;width:30px;height:30px;}
}
</style>
</head>
<body>
<div class="pagebar">
 <div class="dot"></div>
</div>
</body>
</html>

发表评论