CSS3动画产生圆圈由小变大向外扩散的效果

最新推荐文章于 2024-07-24 11:47:23 发布
最新推荐文章于 2024-07-24 11:47:23 发布
阅读量8.6k 收藏 8
点赞数
分类专栏： 前端日常填坑 文章标签： css动画圆圈扩散效果

转载自https://www.cnblogs.com/jiangxiaobo/p/6117902.html    

github： https://github.com/wind-stone/CSS3-Circle-Diffusion
主要是想给博主点个赞，可惜博客园账号丢了。转载在csdn上

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    25% {
        transform: scale(0);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0.0;
    }
}
@-webkit-keyframes "warn" {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }
    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}


.container {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #000;
}
/* 保持大小不变的小圆圈  */
.dot {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 15px;
    top: 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border: 2px solid red;
    border-radius: 20px;
    z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈  */
.pulse {
    position: absolute;
    width: 24px; 
    height: 24px;
    left: 2px;
    top: 2px;
    border: 6px solid red;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 3s ease-out;
    -moz-animation: warn 3s ease-out;
    animation: warn 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
</style>


</head>


<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</body>
</html>


七爷不在我这里
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 彩带扩散效果_利用CSS3动画实现圆圈由小变大向外扩散的效果实例
weixin_39626613的博客
12-23 367
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)css3中新增了一个animation的属性，该属性类似于创建一个animation对象如：animation: bounce 2.0s infinite ease-in-out;animation有以下几个参数：属性描...
html实现圆圈逐渐放大,利用CSS3动画实现圆圈由小变大向外扩散的效果实例
weixin_30722051的博客
06-01 2203
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)css3中新增了一个animation的属性，该属性类似于创建一个animation对象如：animation: bounce 2.0s infinite ease-in-out;animation有以下几个参数：属性描...
今日份打卡学习
m0_52433781的博客
07-29 136
关于c3属性 word-break:normal：默认 word-break:keep-all;以符号作为换行的标志 word-break:break-all;允许单词为换行，可以强行截断英文单词，达到词内换行效果 word-wrap:normal默认值 break-word 内容将在边界内换行,不会打断英文 大小写转换： text-transform:capitalise 开头字母大写 text-transform:uppercase 全部转化为大写 t...
CSS实现扩散，水波纹
最新发布
像鱼的博客
07-24 138
css实现灯光扩散的效果
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
09-22
主要给大家介绍了关于如何利用CSS3动画实现圆圈由小变大向外扩散效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
css3实现的圆形从中心向四周扩散动画效果
09-08
css3实现的圆形从中心向四周扩散动画效果
CSS3地图动态实例代码(圆圈向外扩散)
09-27
首先，CSS3中的关键帧动画（@keyframes）是实现圆圈扩散的核心工具。通过定义不同时间点的样式变化，我们可以控制元素随时间的动态变化。在本实例中，`@keyframes myfirst`定义了一个名为`myfirst`的动画，它在20%、...
css3 彩带扩散效果_【css3动画】圆波扩散效果
weixin_39688870的博客
12-23 332
圆波扩散动画效果，就是一个圆由中心向四周循环扩散的动画效果。圆波扩散动画效果应用非常广泛，例如可以用来表示某一个位置的状态信息，在网页设计中，常常被用来作为登录或切换页面时的等待状态。如下图所示：【css3动画】圆波扩散效果本文将使用纯CSS3实现上图动画效果。实例一：由实心圆点向四周扩散(有阴影)css3动画圆波扩散效果@keyframes warn {0% {transform: scale(...
纯css3圆形从中心向四周扩散动画效果.zip
07-03
css3圆形扩散动画，css3四周扩散动画
纯css3圆形从中心向四周扩散动画效果特效代码
03-20
css3圆形扩散动画，css3四周扩散动画
纯CSS实现动态圆圈大小弹性变化特效动画
qq_40407998的博客
08-26 1815
纯CSS实现动态圆圈大小弹性渐变特效动画 <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现圆圈动态发光特效动画</title> <style> body { background-color: #000000; } @keyframes twinkling { 0%
【css3动画】圆波扩散效果
09-28 1002
实例一：由实心圆点向四周扩散（有阴影） <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=devi...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
weixin_31755771的博客
08-03 1384
本文实例讲述了CSS3实现闪烁动画效果的方法。分享给大家供大家参考。具体方法如下：给class属性名为className的元素添加闪烁动画效果复制代码代码如下:.className{-webkit-animation: twinkling 1s infinite ease-in-out}.animated{-webkit-animation-duration: 1s;animation-durat...
css实现不断向外扩散的圆
A873054267的博客
03-20 2189
实现原理： 主要就是依靠css动画特性中的 transform变换---依据scale变换 为实现波纹效果，会写两个元素到内部，然后让第二个元素延时执行动画，即可实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图&l...
css3 彩带扩散效果_纯css3圆形从中心向四周扩散动画效果
weixin_36328839的博客
12-23 269
纯css3圆形从中心向四周扩散动画效果_何问起@keyframes warn{0% {transform:scale(0.3);-webkit-transform:scale(0.3);opacity:0.0;}25%{transform:scale(0.3);-webkit-transform:scale(0.3);opacity:0.1;}50%{transform:scale(0.5);-w...
css3 实心圆由中心向外放大扩散 变透明动画 模拟点击效果 水滴纹效果 放大缩小动画
Khun_HWJ的博客
07-11 2286
网上找效果是这样 ， https://file.zcool.cn/community/flash/11fdaf57764c5f0000018c1b5d5a4e.swf?Expires=1562819038&OSSAccessKeyId=lwQTEmwHzzSWSkqd&Signature=7v1SFd%2BJSRkWHReEcQ8pBXBWPYs%3D 以下是自己做的效果 和这个...
css3圆圈闪烁扩散js特效
ICode联盟
07-22 465
纯css3代码实现的闪烁动画特效，css圆圈扩散闪烁特效。
利用CSS3动画实现圆圈由小变大向外扩散的效果
07-09
可以使用CSS3的`@keyframes`和`transform`属性来实现圆圈由小变大向外扩散的效果。以下是一个示例代码： ```css .circle { width: 20px; height: 20px; position: relative; background-color: #f00; border-radius: 50%; animation: expandCircle 1s infinite ease-out; } @keyframes expandCircle { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } ``` 在上面的代码中，我们创建了一个类名为`circle`的元素，它代表了圆圈。通过设置`width`和`height`属性，我们定义了圆圈的初始大小为20px，并使用`background-color`属性设置颜色为红色。`border-radius`属性设置圆角半径为50%以获得圆形的效果。 接下来，我们使用`@keyframes`定义了一个名为`expandCircle`的动画。在动画的开始阶段（0%），圆圈的大小为0，透明度为1。在动画的结束阶段（100%），圆圈的大小为3倍，透明度为0。通过`transform`属性的`scale()`函数可以实现元素的缩放效果。 最后，我们将动画应用于`circle`类，使用`animation`属性将`expandCircle`动画设置为1秒持续时间，并且无限循环播放（`infinite`），并且使用`ease-out`函数使动画结束时的变化更加平滑。 这样，当你在HTML中使用`<div class="circle"></div>`创建一个具有`circle`类的元素时，它将显示为一个逐渐由小变大并向外扩散的圆圈效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值