文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我如何让这3个圆圈交替，而不是同时进行。不要使用CSS

要实现让三个圆圈交替而不是同时进行的效果，可以使用JavaScript来控制它们的显示和隐藏。以下是一个示例代码：

代码语言：html
复制
<!DOCTYPE html>
<html>
<head>
    <title>Circle Animation</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div class="circle" id="circle1"></div>
    <div class="circle" id="circle2"></div>
    <div class="circle" id="circle3"></div>

    <script>
        function showCircle(circleId) {
            var circle = document.getElementById(circleId);
            circle.style.display = "block";
        }

        function hideCircle(circleId) {
            var circle = document.getElementById(circleId);
            circle.style.display = "none";
        }

        function animateCircles() {
            setInterval(function() {
                showCircle("circle1");
                setTimeout(function() {
                    hideCircle("circle1");
                    showCircle("circle2");
                    setTimeout(function() {
                        hideCircle("circle2");
                        showCircle("circle3");
                        setTimeout(function() {
                            hideCircle("circle3");
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 3000);
        }

        animateCircles();
    </script>
</body>
</html>

在上述代码中，我们使用了JavaScript的setInterval和setTimeout函数来实现圆圈的交替显示和隐藏。setInterval函数用于定时触发整个动画过程，每隔3秒执行一次。在每次执行时，我们使用setTimeout函数来设置不同圆圈的显示和隐藏时间间隔，从而实现交替效果。

请注意，上述代码只是一个示例，实际应用中可能需要根据具体需求进行修改和优化。

相关搜索:python 树状图python标准类库python 做动画python3 循环python avgpython解析数据python建立元组python网络维护python手机编程python执行命令
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

【CSS】Houdini， CSS的成人礼

前情提要 CSS：老板，你看ES9，ES10都出来了，您看我的事情什么时候... W3C: 这不是正在走着流程嘛！小C你不要心急！...去修改CSS样式嘛，大佬们觉得这样的字符串操作麻烦而且速度很慢，所以定义了一组CSS专有的接口对象去进行操作，Typed OM提供了与底层值交互的接口，通过使用专门的JS对象来表示它们。...这个问题等同于： 问题：结合CSS的产生背景和历史渊源，请问如何客观评价Houdini的历史地位？（本小题10分，请考生答题时不要超出装订线） （ 难道我们在考历史题吗？...,从0度画到360度 ctx.arc(width, height, radius, 0, 2 * Math.PI); // 用fillstyle把圆圈轨迹内部进行颜色填充...不要在这里尝试使用fetch等方法。 上面两步做完了，我们就可以使用CSS去使用我们刚刚定义的paint函数了 <!

67720

你不知道的 CSS

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。...flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 ? 07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...按钮禁用时，不要忘了设置鼠标状态 ? 32【背景虚化】?使用CSS滤镜实现背景虚化 ? 33【fill-available】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

1.3K30

    • 你未必知道的49个CSS知识点

    本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。...flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 ? 07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...按钮禁用时，不要忘了设置鼠标状态 ? 32【背景虚化】?使用CSS滤镜实现背景虚化 ? 33【fill-available】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

    1.3K20

    你未必知道的49个CSS知识点

    flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 ? 07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....按钮禁用时，不要忘了设置鼠标状态 ? 32【背景虚化】?使用CSS滤镜实现背景虚化 ? 33【fill-available】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

    1.5K20

    你未必知道的49个CSS知识点

    flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 ? 07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。...【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度 ? 17.【动画方向】?动画方向可以选择alternate，去回交替进行 ? 18.【线性渐变应用】?...background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....按钮禁用时，不要忘了设置鼠标状态 ? 32【背景虚化】?使用CSS滤镜实现背景虚化 ? 33【fill-available】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

    1.2K10

    使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

    所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？ 在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。...在CSS网格中使用Place-Items ? 我们只需使用两行 CSS 代码就可以将元素水平和垂直居中。...这前，我还不知道每个li项旁边的默认小圆圈称为marker。...在我知道::marker伪元素之前，如果要重置小圆圈列表样式，我们一般使用伪类::before或::after伪元素： ul { list-style: none; padding: 0...text-align 属性 随着CSS flexbox和 grid 的日益普及，初学者一般也是使用它们来居中文本，而不是使用text-align属性，但是，旧方法仍然有效。

    2.1K20

    一张图告诉你前端该怎么学 | 老尚自学方法论

    没有思路呀，同学们的需要，就是我的方向 根据我长期讲前端零基础课的经验 我总结了一套【老尚前端方法论】 这是一套很完整、系统的前端开发自学理论 借着这个方法的讲解 我同时也回答一些前端自学小伙伴的问题...就是说你在自学的过程中，找不到具体的方向 不知道知识点之间的关联性 更不清楚自己的学习速度、进度是不是正常 不知道如何使用一个实例把它们串起来 那么这种情况你弹幕发个1我看看 我看一下有多少个小伙伴有这种情况...就是自学相当于是自己从头手动造车 而现在的汽车相当复杂了 不是像以前那样，一个发动机加4个轮子就ok 所以你自学的过程中，就算你一切顺序 也是需要相当的时间的 你不要觉得，喔，感觉老尚说的挺对 照着老尚说的做一下试试...你的前端开发能力才会有一个结构、体系上的变化 这节视频我主要是从学习方法、逻辑上去讲 如何从整体、根本上去提升你的前端自学能力 那现在我们先把图片只留下第一层 从左向右看，首先就是html、css、js...所以你们理解了之后，就会发现 vue也好，reactJs也罢，它们并不是新的技术 而只是原生JavaScript的另一种方式的使用 只是让我们在开发业务的时候，更有效率 所以我说它们不是技术，只是工具

    88630

    使用这些 CSS 属性，布局效率又提高了一个层次！

    所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？ 在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。...在CSS网格中使用Place-Items 我们只需使用两行 CSS 代码就可以将元素水平和垂直居中。...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 列表的 marker 属性 ? 这前，我还不知道每个li项旁边的默认小圆圈称为marker。...在我知道::marker伪元素之前，如果要重置小圆圈列表样式，我们一般使用伪类::before或::after伪元素： ul { list-style: none; padding: 0...text-align 属性 随着CSS flexbox和 grid 的日益普及，初学者一般也是使用它们来居中文本，而不是使用text-align属性，但是，旧方法仍然有效。

    2K20

    一篇文章，带你了解7种数据可视化的方式！

    图表只有在“完美”的模拟数据下才有可能呈现光滑的曲线，而且真实的数据会让图表变扁。 连接数据点的曲线意味着存在一些中间点，但这只是一种错觉。 如何避免 如果数据点很少，使用条形图。...嵌套的圆圈需要图例或工具提示，因为标签通常不能优雅地附加到相应的圆圈上。 在嵌套图表中，圆环的末端使比较大小变得困难。 如何避免 考虑使用条形图来精确显示百分比。...风险小结 “香肠”隐藏了大量的真实数据，因此不够准确，无法进行分析和严肃的决策。 此外，这样的图表在紧凑性上存在问题，他们需要额外的空间，才能看起来不凌乱。 如何避免 不要用间距破坏整体数据。...如何避免 不要在商业图表上使用3D效果。 确保图表设计支持真实的数据，这些数据通常不像原型图那样完美呈现波浪形。 7....如何避免 事先对用户和业务进行研究，并根据研究结果进行仪表盘设计。 避免针对业务需求的过于简化的仪表板设计。 使用实际的任务，在没有提示的情况下对用户进行测试。例如，“第二季度的收入是多少?

    1.3K40

    数据工厂平台10： 首页底部

    鉴于我捅破了这层窗户纸，所以我们的设计是，同样是统计数据，但是底部留白我们要统计的一定得是登陆者的个人信息，而非全平台的总体数据。...试想，你们公司的app 首页，放的不是用户的个人信息，个人浏览记录，个人兴趣推送。而是这个app的总体数据如一共现在多少用户，每个功能使用了多少次。这样是不是很别扭？？？...所以这个底布统计数据，我们决定用扇形图来展示个人的数据，当然个人的数据中也有个人在乎，个人不在乎的，这里我不给大家规定死了。全部提出来，让大家自行选择，我会挑选几个作为例子示范。...，而防止被之前的外层div 影响。...下节课我们会给大家搞定这三件事，届时，首页也将告一段落，我们将正式进入到设计构造数据的章节中。

    50240

    一篇文章，带你了解7种数据可视化的方式！

    图表只有在“完美”的模拟数据下才有可能呈现光滑的曲线，而且真实的数据会让图表变扁。 连接数据点的曲线意味着存在一些中间点，但这只是一种错觉。 如何避免 如果数据点很少，使用条形图。...嵌套的圆圈需要图例或工具提示，因为标签通常不能优雅地附加到相应的圆圈上。 在嵌套图表中，圆环的末端使比较大小变得困难。 如何避免 考虑使用条形图来精确显示百分比。...风险小结 “香肠”隐藏了大量的真实数据，因此不够准确，无法进行分析和严肃的决策。 此外，这样的图表在紧凑性上存在问题，他们需要额外的空间，才能看起来不凌乱。 如何避免 不要用间距破坏整体数据。...如何避免 不要在商业图表上使用3D效果。 确保图表设计支持真实的数据，这些数据通常不像原型图那样完美呈现波浪形。 7....如何避免 事先对用户和业务进行研究，并根据研究结果进行仪表盘设计。 避免针对业务需求的过于简化的仪表板设计。 使用实际的任务，在没有提示的情况下对用户进行测试。例如，“第二季度的收入是多少?

    1.3K30

    使用 Html、CSS 和 Javascript 的简单模拟时钟

    在本文中，我将向您展示如何使用 HTML CSS 和 JavaScript代码制作模拟时钟。我已经设计了很多类型的模拟时钟。这款手表采用深色仿形设计的形状。...在这里，我使用了符号而不是 1 到 12 的数字。 您可以观看现场演示以了解该模拟时钟的工作原理。自从我借助neumorphism设计制作它，我在时钟的背景和页面的背景中使用了相同的颜色。...我在这里使用了 box-shadow 来实现新同态设计。 这很简单，总的来说是我做的。下面我将展示我如何制作这个Javascript 模拟时钟的完整分步。...首先，我使用以下代码制作了两行。我将这两行放在90 degree angle彼此的a处。我曾经background: # 282828使线条更亮。...我使用下面的 HTML 和 CSS 代码创建和设计了这些手。

    2.3K50

    【Web技术】610- Web上的图片技巧

    不仅如此，如果图片因为某些原因没有加载，而它有一个明确的alt说明，那么它将会作为一个回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。 我们有以下的图片。...没有alt的图片仍然保留了它的空间，这让人感到困惑，也不利于访问。而另一张折叠起来，以适应其空的alt属性的内容，这就造成了它因为有边框而显得很细小。...而CSS背景图片却不是这样的。在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。...这与 CSS 中的 object-fit: cover 或 background-size: cover 非常相似。 可访问性关注的问题 说到SVG的可访问性，这让我想起了 元素。...如何做到这一点呢？对我来说，最好的解决方案是使用内嵌式SVG。

    2.9K30

    CSS Transitions

    「如果大家对这些概念熟悉，可以直接忽略」 同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。...当指定为all时，任何发生变化的CSS属性都会进行过渡动画。 尽管使用all可能很诱人，因为它可以节省大量输入，特别是当我们要对多个属性进行动画处理时，但还是建议不要使用它。...流畅的动画应该以60帧每秒的速度运行，这意味着我们需要「在起始和结束之间计算出60个单独的位置」。 我们先看一个让每个位置都均匀分布的情况： 每个圆圈代表一个时间点。...随着圆圈从左到右移动，这些是向用户显示的帧。 在这个动画中，我们使用的是线性（linear）时间函数。这意味着元素以「恒定的速度移动」；我们的圆圈每一帧都移动相同的距离。...时间函数描述了一个值如何在固定时间间隔内从0到1，而不是动画应该多快完成。一些时间函数可能会感觉更快或更慢，但在这些示例中，它们都需要完全1秒来完成。

    29230

    前端运用图片的技巧总结

    不仅如此，如果图片因为某些原因没有加载，而它有一个明确的alt说明，那么它将会作为一个回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。 我们有以下的图片。...没有alt的图片仍然保留了它的空间，这让人感到困惑，也不利于访问。而另一张折叠起来，以适应其空的alt属性的内容，这就造成了它因为有边框而显得很细小。...而CSS背景图片却不是这样的。在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。...这与 CSS 中的 object-fit: cover 或 background-size: cover 非常相似。 可访问性关注的问题 说到SVG的可访问性，这让我想起了 元素。...如何做到这一点呢？对我来说，最好的解决方案是使用内嵌式SVG。

    2.6K20

    ❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️

    直接跳到末尾 获取完整源码 在本文中，我将带着大家展示如何使用 HTML 和 CSS 代码创建 玻璃态登录表单。你可以将任何简单的设计转换为玻璃态设计。为此，只需要更改一点代码。...如果你想使用 HTML 和 CSS 代码创建玻璃态登录表单，请按照以下教程进行操作。 正如你在上面的演示中看到的那样，它的构建就像一个普通的登录表单。在网页上创建了两个彩色圆圈。...我使用以下 HTML 和 CSS 代码在该页面上创建了两个彩色圆圈。...虽然这两个圆圈不是设计的一部分，但我创建了这两个圆圈来设计背景。但是，在这种情况下，你可以使用任何其他图像。 这个圆的宽度和高度为 200 像素，并且使用了 50% 的边框半径使其完全圆形。...我在这里使用了背景颜色半透明。Border-radius: 10px用来让四个角变得有点圆。如果你观看演示，你将了解此登录表单背景中的颜色有点模糊。

    1.7K30

    别整一坨 CSS 代码了，试试这几个实用函数

    CSS比较函数从2020年4月就开始支持了，我喜欢使用这些函数，但最喜欢的是 clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。...流体高度 有时候，我们页面的主区的高度需要根据视口大小而变化。这种场景，我们倾向于通过媒体查询或使用视口单位来改变这种情况。...我们可以使用 calc() 来减去的进度条宽度，这样就可以了，但这并不是100%有效： .loading-thumb { /* 40px represents the thumb width. */...left: calc(100% - 40px); } 我们来看下，如何利用CSS变量和比较函数来更好地实现： .loading-thumb { --loading: 0%; --loading-thumb-width...在移动端上，这个分隔符应该变成水平的，如下图： 我的解决方案是使用一个边框和flex。

    68210

    独家 | Tableau中的Z-Order了解一下！

    在CSS中，有一个z-index设置，用于在视图中向前或向后移动对象，控制哪个对象被放在顶层。在Tableau中，我们没有这种明确定义z顺序方式。相反，视图由正在使用的标记定义。...在这篇文章中，我将概述如何控制z顺序。Spoiler - 它是Marks Card上控制z顺序的属性次序，并提供三个例子。...由颜色图例标记顺序 以下是使用Tableau世界指标数据中的女性预期寿命和婴儿死亡率制作的散点图。我已经使用Region（即大陆）在颜色上绘制了这个散点图。...这意味着代表非洲的圆圈位于代表亚洲的圆圈之上，依此类推。在下图中，您将看到代表中国的大圆圈位于所有其他区域之上，除了非洲国家的小蓝点。...这是因为Tableau正在使用国家名称的顺序（标记卡上的顶层属性），而不是颜色图例。由于俄罗斯联邦（欧洲）在中国的国家名单中位于中国以下，因此它在中国的z顺序中落后。

    2.5K20

    教你在Tableau中绘制蝌蚪图等带有空心圆的图表（多链接）

    Mark的帖子概述了这种图表不同风格的优缺点，但他在这篇推特（https://twitter.com/EGCosh/status/997374330454593536/photo/1 ）上询问如何让线停在圆圈的边缘...，而不是进入到圆圈的中心。...那么如何更改数据？我们可以通过计算来缩短这些线。但这并不容易，因为缩短的量需要取决于蝌蚪图的走向，所以正数和负数都有可能。...他建议用“I”在圆圈内部加个标签并使之变白。我想到的一个类似的方法是利用字符作为标签并用白色填充圆圈。但我发现如何将标签准确的放在圆圈中心和找到正确的字体大小仍是难题。...注意 – 你可以使用Control键多选所有这些，然后双击最后一个。这将立即改变所有颜色而不用手动改变每一个的颜色。

    8.4K50

    Clamp()、Max() 和 Min() CSS 函数的用例

    我们可以通过使用宽度或高度的百分比值（例如：宽度：20%）来做到这一点，但这并没有给我们太多的控制权。 我们希望能够有一个流体大小，它同时尊重最小值和最大值，这就是clamp来救援的地方！...); } .decorative--2 { right: clamp(-8rem, -10.909rem + 14.55vw, 0rem); } } 让我剖析一下上面的 CSS，让你更容易理解...editors=1100 加载条 这个例子的灵感来自 Andy Bell 的一条推文，我真的很喜欢在这个用例中使用 CSS clamp()！ 条形按钮应该从左到右进行动画处理，反之亦然。...我们可以使用 CSS calc() 减去按钮宽度，它会起作用，但这不是 100% 灵活的。...CSS 文章标题 在构建CSS 文章标题时，我需要一种方法来为内容添加动态填充，同时，在较小的视口上保持最小值。

    1.6K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券