檬味博客 » 问答 » 分享一个CSS3圆圈放大缩小循环动画的效果代码

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

CSS3圆圈动画放大缩小循环动画效果，特效简单又漂亮，看着听不错的，感兴趣的朋友们可以来看一下 代码如下：CSS3圆圈动画放大缩小循环动画效果dot {margin:150px auto;width:200px;height:200px;background-color:#E3E3E3;border-radius: 50%;box-shadow: 0 0 10px rgba(0,0,0,3...
分享一个CSS3圆圈放大缩小循环动画的效果代码
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>2024-07-21
mengvlog 阅读 8 次 更新于 2025-06-20 01:05:34 我来答关注问题0
1 个回答檬味博客专题活动
  • 文暄生活科普 分享一个CSS3圆圈放大缩小循环动画的效果代码

    代码如下：CSS3圆圈动画放大缩小循环动画效果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定义的动画名*/...

  • 轩9y 一个大圆圈里面有个数字,怎么用HTML + CSS实现?

    首先我们需要分析一下整个牌的构造，以普通数字牌1为例，共可分为5个部分，分别是1、外框2、颜色3、上下角标数字4、里面的白色椭圆5、中间的大数字 对应不同的部分，我们将其分解为5部分的html代码并为其添加class，1、卡牌背景2、卡牌颜色（由于布局相同只有颜色不同，故将颜色抽出成为单独的类）3...

  • rui_xing_ css3 圆圈怎么加载数据从1%-100%

    CSS样式表 接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：.load-bar-inner {height: 99%...

  • 遥望沵所谓life css中,如何改变一个标签的样式得到一个1/4圆!

    .yuan{ width:200px;height:200px;border-radius:100% 0 0 0;background:#F00;} 是这样的效果吧！

  • 网格生活百科 win7卡在欢迎界面进不去。圆圈一直转

    1、开机不断点击F8键，进入系统操作选单，选【最后一次正确配置】，随后电脑会自动重启，尝试能否正常进入系统；2、如果上述方法不能进入，再次按F8键，进入系统操作选单，选【安全模式】，依次选择【开始】-【所有程序】-【附件】-【系统工具】-【系统还原】，在系统还原对话框中选择【恢复我的计算机到...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部