CSS3添加动态圆点

最新推荐文章于 2022-12-15 20:03:32 发布
最新推荐文章于 2022-12-15 20:03:32 发布
阅读量1.9w 收藏 1
点赞数 1
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35622189/article/details/111273417
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS3添加动态圆点</title>

    <style>

        @-webkit-keyframes mars3d-mapAni {

    0% {

        width: 0;

        height: 0;

        opacity: 1;

        filter: alpha(opacity=1)

    }

 

    25% {

        width: 12px;

        height: 12px;

        opacity: .7;

        filter: alpha(opacity=70)

    }

 

    50% {

        width: 20px;

        height: 20px;

        opacity: .5;

        filter: alpha(opacity=50)

    }

 

    75% {

        width: 30px;

        height: 30px;

        opacity: .2;

        filter: alpha(opacity=20)

    }

 

    to {

        width: 40px;

        height: 40px;

        opacity: 0;

        filter: alpha(opacity=0)

    }

}

 

@-moz-keyframes mars3d-mapAni {

    0% {

        width: 0;

        height: 0;

        opacity: 1;

        filter: alpha(opacity=1)

    }

 

    25% {

        width: 12px;

        height: 12px;

        opacity: .7;

        filter: alpha(opacity=70)

    }

 

    50% {

        width: 20px;

        height: 20px;

        opacity: .5;

        filter: alpha(opacity=50)

    }

 

    75% {

        width: 30px;

        height: 30px;

        opacity: .2;

        filter: alpha(opacity=20)

    }

 

    to {

        width: 40px;

        height: 40px;

        opacity: 0;

        filter: alpha(opacity=0)

    }

}

 

@-o-keyframes mars3d-mapAni {

    0% {

        width: 0;

        height: 0;

        opacity: 1;

        filter: alpha(opacity=1)

    }

 

    25% {

        width: 12px;

        height: 12px;

        opacity: .7;

        filter: alpha(opacity=70)

    }

 

    50% {

        width: 20px;

        height: 20px;

        opacity: .5;

        filter: alpha(opacity=50)

    }

 

    75% {

        width: 30px;

        height: 30px;

        opacity: .2;

        filter: alpha(opacity=20)

    }

 

    to {

        width: 40px;

        height: 40px;

        opacity: 0;

        filter: alpha(opacity=0)

    }

}

 

@-ms-keyframes mars3d-mapAni {

    0% {

        width: 0;

        height: 0;

        opacity: 1;

        filter: alpha(opacity=1)

    }

 

    25% {

        width: 12px;

        height: 12px;

        opacity: .7;

        filter: alpha(opacity=70)

    }

 

    50% {

        width: 20px;

        height: 20px;

        opacity: .5;

        filter: alpha(opacity=50)

    }

 

    75% {

        width: 30px;

        height: 30px;

        opacity: .2;

        filter: alpha(opacity=20)

    }

 

    to {

        width: 40px;

        height: 40px;

        opacity: 0;

        filter: alpha(opacity=0)

    }

}

 

@keyframes mars3d-mapAni {

    0% {

        width: 0;

        height: 0;

        opacity: 1;

        filter: alpha(opacity=1)

    }

 

    25% {

        width: 12px;

        height: 12px;

        opacity: .7;

        filter: alpha(opacity=70)

    }

 

    50% {

        width: 20px;

        height: 20px;

        opacity: .5;

        filter: alpha(opacity=50)

    }

 

    75% {

        width: 30px;

        height: 30px;

        opacity: .2;

        filter: alpha(opacity=20)

    }

 

    to {

        width: 40px;

        height: 40px;

        opacity: 0;

        filter: alpha(opacity=0)

    }

}

        .mars3d-animation-point {

            width: 20px;

            height: 20px;

            border-radius: 50%;

            border: 2px solid hsla(0,0%,100%,.5);

            cursor: pointer;

            color: #0ff;

            background: currentColor;

            z-index: 3;

            left: 50%;

            top: 50%;

            -webkit-transform: translate(-50%,-50%);

            -moz-transform: translate(-50%,-50%);

            -o-transform: translate(-50%,-50%);

            -ms-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

            box-shadow: 0 0 2em currentColor,0 0 .5em currentColor;

            position: absolute;

            /* font-size: 20px; */

        }

        .mars3d-animation-point:after, .mars3d-animation-point:before {

            border: 2px solid;

            -webkit-animation: mars3d-mapAni 1s ease infinite;

            -moz-animation: mars3d-mapAni 1s ease infinite;

            -o-animation: mars3d-mapAni 1s ease infinite;

            -ms-animation: mars3d-mapAni 1s ease infinite;

            animation: mars3d-mapAni 1s ease infinite;

        }

        .mars3d-animation-point:after, .mars3d-animation-point:before, .mars3d-animation-point p:after, .mars3d-animation-point p:before {

            content: "";

            position: absolute;

            width: 100%;

            height: 100%;

            left: 50%;

            top: 50%;

            border-radius: 50%;

            -webkit-transform: translate(-50%,-50%);

            -moz-transform: translate(-50%,-50%);

            -o-transform: translate(-50%,-50%);

            -ms-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

            /* font-size: 20px; */

        }

        .mars3d-animation-point p {

            position: absolute;

            left: 50%;

            top: 50%;

            width: 0;

            height: 0;

            border-radius: 50%;

            -webkit-transform: translate(-50%,-50%);

            -moz-transform: translate(-50%,-50%);

            -o-transform: translate(-50%,-50%);

            -ms-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

            -webkit-animation: mars3d-mapAni 2s ease infinite;

            -moz-animation: mars3d-mapAni 2s ease infinite;

            -o-animation: mars3d-mapAni 2s ease infinite;

            -ms-animation: mars3d-mapAni 2s ease infinite;

            animation: mars3d-mapAni 2s ease infinite;

        }

 

    </style>

</head>

<body>

    <div style="position: absolute; left: 0px; top: 0px; pointer-events: all; transform: matrix(1, 0, 0, 1, 391.351, 581.323); transform-origin: left bottom 0px;">

        <div class="mars3d-animation-point" style="color:#f33349;">

            <p></p>

        </div>

    </div>

</body>

</html>

IT侠客行
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS3 动画(圆点闪烁动画效果的实现)
人间草木
11-07 1万+
代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
html css小圆圈,jquery+css3实现会动的小圆圈效果
weixin_36085931的博客
06-01 315
本文实例讲述了jquery+css3实现会动的小圆圈效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：那些变换颜色的小豆豆h1{font-size:16px;}.circle{position:absolute;width:100px;height:100px;border-radius: 50px;-webkit-border-radius:50px;-moz-border-...
动态添加圆点
u012278347的博客
09-29 115
//动态添加圆点 View view2 = new View(this); view2.setBackgroundResource(R.drawable.point_nomarl); LayoutParams params = new LinearLayout.LayoutParams(10, 10); if (i!=0) { para...
CSS3实现的圆点加载动画
wu1737149371的博客
03-12 1391
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3加载动画&lt;/title&gt; &lt;style&gt; body { overflow: hidden;
动态添加小圆点
qq_40446718的博客
02-07 484
/**      * 动态添加小圆点          * @param list      */ //shape.xml  文件的配置 //红色圆点             //绿色圆点
js 动态生成小圆点
一阵云翳✲
06-11 1668
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态生成小圆点&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; paddin
纯CSS3代码实现switch滑动开关按钮效果
09-27
通过CSS3的`:checked`伪类，我们可以根据`<input>`的状态改变`<label>`的样式，从而实现动态效果。 总的来说，这个纯CSS3实现的switch滑动开关按钮效果充分利用了CSS选择器、伪元素和过渡动画，无需JavaScript就能...
浅谈html5标签css3的常用样式
09-27
总结来说，HTML5的新标签和CSS3的样式属性共同构建了现代网页的丰富和动态特性，为开发者提供了更高效、更美观的设计工具。了解并熟练运用这些知识，将有助于创建出更具吸引力和用户体验的网页。
使用CSS3设计地图上的雷达定位提示效果
09-24
完成以上步骤后，你将在地图上看到一个动态的雷达定位提示效果，它以一个圆点为中心，随着动画的进行，圆点周围会产生类似水波扩散的涟漪效果。这个效果不仅适用于图像定位标识，还可以根据需求进行定制和优化，以...
纯CSS3代码实现滑动开关效果
09-03
3. `input:checked:before`选择器在开关被选中时应用新的样式，如上所述，同时添加了一个内阴影来增强3D效果。 4. `input:checked:after`选择器将圆点移动到开关的右侧，表示开关已打开。这通过改变`:after`伪元素...
HTML5+CSS3网页设计-第二章 列表表格与媒体元素.pptx
12-21
HTML5和CSS3是现代网页设计的核心技术，它们极大地丰富了网页的表现力和交互性。在HTML5中，列表、表格和媒体元素是构建网页内容的重要组成部分。 **列表(Lists)** HTML5提供了三种类型的列表：无序列表（`<ul>`）...
【css3】径向渐变实现任意大小背景圆点
haolangtaiye的博客
09-30 859
实现原理 使用透明色紧接透明色的渐变即可实现圆点 渐变半径刚好为背景大小一半时，圆点刚好填满背景大小，即 71% （1 / √2 ≈ 0.71） .point-bg { background-image: radial-gradient(red 71%, transparent 0); background-size: 100px 100px; background-repeat: no-repeat; } 结果如下 tips: 渐变函数生成的结果等同于图片，
自定义动态跳动的三个加载小点
豌豆的专栏
11-08 2222
先说下背景把，最近sdk改版，中间有一个加载框，其实就是显示一串提示字，但是有时需要加载的时间比较长，用户又不能做其他操作，时间久了，感觉界面像卡死一样，不然，其实还在加载，体验非常不好，所以想在文字后边加三个加载的小点不停的跳动。技术实现方式 写三个字符串，把这段拼接到文字后边，开个handler 间隔一百毫秒换一个，也可以实现，但是有个问题，如果这样的每个页面都要写个handler 去设置它，并
css动画从左到右滚动的光点
_小郑有点困了的博客
01-15 1669
先看效果： 这个小点是从左往右运动的，也非常简单，一开始绝对定位到x方向看不到，然后在生命周期函数里面定时器500毫秒，行内样式改变left的值，运动到有点看不到的位置。当然后需要有个transition才能看到动画效果 代码： <!-- 亮点 --> <span class="lightDot" ref="lightDot" :style="{left:leftPlace,transition:`left ${time}s ease-in-out`}"></span&gt
关于CSS动画@-webkit-keyframes的两种实现方式
debugtoday的博客
02-28 6599
关于CSS动画@-webkit-keyframes的两种实现方式
CSS 计数器的妙用：数字递增动效。
icontent
05-01 464
转自：http://www.pinlue.com/article/2020/10/1911/3611304621351.html
css锯齿边框圆点,CSS实现OSX风格的三个圆点
weixin_42504858的博客
08-04 501
效果展示先看图，左上角OSX风格的圆点我的实现方法按照我之前的习惯，我会在div中放入一个span用作钩子，如下HTML结构：正文内容然后写入如下CSS：.box{position:relative;padding:40px20px20px;}.box>span,.box>span::before,.box>span::after{position:absolute;...
css3多种径向渐变函数重叠实现小圆圈特效
qq_41444226的博客
12-15 576
日常前端开发中，离不开花样繁多的css3渐变特效ui，今天和大家分享一哈，css3多种径向渐变函数重叠实现小圆圈特效。好了今天分享到此结束了，更多关于css3渐变视频教程请前往布衣前端独家B站查看。
html自动编号小圆点怎么实现,css如何实现自动编号？计数器的使用
weixin_28881989的博客
06-04 345
本篇文章给大家带来的内容是介绍css如何实现自动编号？计数器的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。一、自动编号在CSS 2.1中的自动编号由两个属性控制，它们分别为：“counter-increment”和“counter-reset”。由这些属性定义的计数器(counter)与“content”属性的counter()和counters()函数一起使用。'cou...
css3 动态 放缩小圆点
最新发布
09-02
要实现CSS3动态放缩小圆点，可以利用CSS3的动画和过渡属性。 首先，在HTML文件中创建一个小圆点元素，可以使用`<div>`标签，并为其添加一个唯一的ID，例如`<div id="dot"></div>`。 然后，在CSS文件中对这个小圆点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT侠客行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值