使用HTML和CSS设置圆的动画

文章/答案/技术大牛

发布

1回答

javascript、html、css

有人知道如何用html和CSS中的文本和时钟制作下面的动画吗？dl=0 我的代码的问题是，当我调整窗口大小时，或者当我使用响应模式时，实时时钟和圆圈不断移动。

浏览 33提问于2021-07-05得票数 0

3回答

旋转半径圆

javascript、html、css

我想创建一个使用CSS和HTML的动画(如果需要的话是JavaScript)。但我不知道该怎么做。我需要创建一个圆，半径轴必须以缓慢的速度在圆内旋转。怎么才能做到呢？

浏览 14提问于2022-09-14得票数 0

回答已采纳

4回答

用CSS动画调整SVG圆半径

html、css、svg、css-animations

我试图用CSS动画SVG圆的radius属性。虽然(使用火狐检查元素工具)，我可以看到动画本身是正确的设置和运行，".innerCircle“的大小并没有明显改变。如果你能发现我明显错过的任何东西，或者以任何方式帮助我，我会非常感激的。我对此相当陌生，所以如果我做错了这件事，请善待我！再次感谢。 animation

浏览 7提问于2015-09-05得票数 16

回答已采纳

1回答

Firefox :动画SVG半径仅适用于百分比

svg、firefox、css-animations、browser-support

我正在尝试为SVG2几何属性r (圆元素的radius property )设置动画。我读到这个属性可以在支持SVG2 (参见Resizing SVG Circle Radius Using CSS Animation)的浏览器中用作CSS属性。现在我注意到，只有当我将值表示为percentages时，r动画才能在Firefox中起作用。如果使用绝对值，则不会对圆进行动画处理，请参见minimum

浏览 19提问于2021-01-20得票数 0

回答已采纳

2回答

如何在html/css中拉伸图像段

html、css、image、animation、stretching

我有一个圆形的图像，当有人悬停在它上面时，我想让它有动画效果并水平拉长，但我希望它只拉伸图像的中心，同时保持左/右的曲线。所以像这样的东西我为我糟糕的绘画技巧道歉。如果使用简单的css设置或其他设置不能做到这一点，有没有其他方法可以将圆动画化为圆？谢谢

浏览 3提问于2012-03-20得票数 0

回答已采纳

1回答

使用CSS3转换时jQuery.animate阶跃函数的等价物

javascript、jquery、css、css-transitions

我正在使用CSS过渡来在屏幕上设置圆(节点)的动画。CSS：JS：我希望能够随时知道转换属性，这样我就可以更新连接节点的线。如果我使用</

浏览 0提问于2012-11-12得票数 4

2回答

使用jquery在鼠标上动态显示圆形缩略图大小

javascript、jquery、css、jquery-animate

我已经使用Css3边界半径生成了图像的圆形缩略图。我想鼠标经过动画，其中圆圈缩略图尺寸增长的鼠标悬停和返回到原始尺寸的鼠标，out.And尺寸增加从圆心与重叠的左，右缩略图的圆。background:grey;width:100px; height:100px;border :5px solid red;border-radius:55px 55px 55px 55px;} html，它给了我尺寸增

浏览 0提问于2013-02-07得票数 0

1回答

自定义html为google地图做了标记

google-maps、css、google-maps-api-3、custom-overlay、overlay-view

有没有办法从html中创建一个简单的标记或图层。我想到了一个圆，它将使用css3进行动画处理。圆圈本身就是一个圆角的div。

浏览 4提问于2011-08-28得票数 8

回答已采纳

2回答

在css中制作一个带虚线边框的圆，并在悬停时设置动画

html、css、css-transitions

我正在尝试制作一个css圆的动画。当用户悬停它时，圆的边框应该变成一条虚线，并且它应该像旋转的轮子一样动起来。我可以让它在给定的时间内旋转，但我找不到一种方法来制作它的动画，直到鼠标指针悬停在它上面，然后当鼠标指针移出圆圈并制作一个虚线边框时停止动画。html</div>div { backgrou

浏览 4提问于2013-06-22得票数 2

回答已采纳

2回答

从css动画元素中获取顶级/正确的值

javascript、html、css

我正在尝试从CSS动画旋转的元素中获取顶部和正确的值，为此，我使用以下代码：<div id="ball1"> </div>@keyframes spin { console.log(window.getComputedStyle(document.getElementById("ball1"), n

浏览 0提问于2019-02-11得票数 4

回答已采纳

1回答

我如何动画SVG笔画作为一个量规？

html、css、svg、css-animations、stroke

我已经设置了这个代码：.gauge { stroke-dashoffset: 500;<html lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" contentviewport&q

浏览 8提问于2021-12-20得票数 1

1回答

如何在React组件中使动态数量的圆圈环绕文本？

css、reactjs、sass

每隔5秒，我的React组件就会访问一个API，它会为我提供一个项目列表。<div className="devices-online">{this.state.devices.length}</div> <div className="devices-

浏览 0提问于2019-07-19得票数 1

3回答

使用CSS3的饼图样式进度条？

html、css、progress-bar、pie-chart

是否有任何库或示例如何使用CSS3创建饼形进度条？

浏览 2提问于2011-09-18得票数 0

回答已采纳

2回答

如何动态结束正在加载的动画

javascript、loops、animation、loading、after-effects

我想创建一个加载动画(不是在CSS中，它是一个复杂的Adobe After Effects动画)。我的目标是创建一个不断循环的动画，每当加载停止时，动画都会以不同的方式结束。例如，假设一个圆不断地旋转，当调用animation.stop()时，这个圆应该旋转得非常快，并缩小到消失。因此，每当调用animation.stop()时，动画都会有一个dynamic ending。我该怎么

浏览 22提问于2019-02-14得票数 0

2回答

使用for循环和setInterval为画布设置动画

javascript、html5-canvas

我正在尝试使用for循环和setInterval来为画布添加动画，但到目前为止还没有成功……以下是我的代码中的内容：function loop(){ var dynamic

浏览 2提问于2013-02-26得票数 0

回答已采纳

1回答

如何使浮动动作按钮转换成全屏形式

android、material-design、floating-action-button

在我的应用程序中，我有一个FAB，我想使用它来创建自定义事件。我想要实现的动画是在材料设计指南的“全屏”下标注的动画。有人知道我是怎么做到的吗？

浏览 1提问于2017-01-23得票数 4

回答已采纳

3回答

CSS3加载环

html、css、css-animations

我有一个有3个圆的CSS3圆加载器。我有问题，每个圆圈(从第一个开始)应该淡出几秒钟后，可能使用CSS动画。任何帮助都是非常感谢的。

浏览 0提问于2012-12-21得票数 2

回答已采纳

1回答

CSS -需要用圆圈制作波浪动画。无法更改HTML

html、css、animation

我必须制作一个动画的5个不同颜色的球，在一个波浪中移动。我正在为球的不同起始位置而努力，就像说明书上说的那样。由于某种原因，第一个孩子的位置和颜色在5个球的序列中排在最后。使用此调色板(指向外部网站的链接。)按照上面的引用，使用circle类设置div元素的样式。每个圆的直径应该是50px。执行动画，使

浏览 21提问于2021-10-28得票数 0

2回答

使用animationFrame的抖动动画

javascript、requestanimationframe

我根据Windows8加载动画制作了一个简单的微调控件，但我还没能弄清楚为什么每个点看起来都会有轻微的抖动。我已经尝试了各种方法来归一化这些值，但没有找到任何可以使其平滑的方法。我做错了什么？

浏览 0提问于2012-11-10得票数 1

1回答

Javascript中的顺序动画

javascript、animation、sequential

我正在尝试使用HTML5画布和Javascript创建动画。我对Javascript的先验知识很少。动画的第一部分是让一个圆“增长”，直到边缘接触到一个十字。然后，十字沿着圆的边缘移动。单独来看，这两个部分都工作得很好，但是，因为我使用的是setInterval()，所以这两个动画可以同时播放，而不是等到第一个动画结束后再开始第二个动画<

浏览 1提问于2012-07-10得票数 1

回答已采纳

点击加载更多