位置：广州松河 > 技术支持 > CSS3圆圈动画放大缩小循环动画效果_CSS学习

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

来源：网络整理时间：2023/3/4 1:05:05 共 3631 浏览

今天在写一个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进行调整！

<!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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：不依赖jQuery滚动弹出顶部导航插件headhesive.js_js/jQuery | ·下一条：CSS 横向菜单允许滚动(滑动)并隐藏滚动条（移动端）_CSS学习