简体中文(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学习者快速成长！