我有一个旋转的方框阴影周围的一个椭圆形的加载图标。在一个完美的圆圈中,这是没有问题的,但由于我想添加一个标志,我宁愿它围绕一条路径旋转,而不是中间的一个锚。

目前,我已经完美地制作了旋转前的形状,但在添加@keyframe旋转时,它会围绕对象中间的锚点旋转。如果你删除@keyframe,那就是我想让颜色旋转的形状。

?

.gradient-spinner{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px -22px;
	width: 48px;
	height:36px;
	transform: rotate(138deg);
	border:1px transparent #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 0px transparent inset,
	            0 -5px 20px 0px rgba(1,197,255,0.4) inset,
	            0 0 20px 0px rgba(0,150,130,0.4) inset,
	            0 5px 20px 0px rgba(162,58,236,0.4) inset,
	            0 5px 20px 5px rgba(1,197,255,0.4),
	            0 0 20px 5px rgba(0,150,130,0.4),
	            0 -5px 20px 2px rgba(162,58,236,0.4);
	            
	            animation:gradient 2s linear infinite;
}

@keyframes gradient{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
<div class="gradient-spinner z-i-100">
</div>

?

转载请注明出处:http://www.sdxiangshi.com/article/20230401/2418926.html

随机推荐

  1. 有没有一个简单的正则表达式来检查日期格式模式?

    我发现有很多正则表达式检查与格式匹配的日期值(数字),但我不想检查这个。我让用户可以选择编写自己的自定义模式日期,如下所示: d-mm-yyyy MM/dd/yy yyyy.mm.d复制我想检查这个用户写的字符串MM/...

  2. 有没有更简单的方法在一个HashMap中的另一个HashMap中创建一个列表?

    我正在开发一个程序,该程序授权服务器的用户使用生成的密钥访问它,目前我正在处理生成部分。服务器的所有者可以指定密钥的数量、服务器ID和密钥的持续时间。我需要存储并检查密钥是否与serverID匹配,以便用户可以使用密钥获取访问权限。我唯一能...

  3. 有没有一种简单的机制来创建一个在项目之间共享的量角器页面对象库?

    我有两个共享UI页面的角度项目,并正在寻找一个简单的机制,以共享他们之间的量角器页面对象。我从概念上探索了使用Angular组件,但在Angular E2E测试中没有使用它们。我开始并将继续探索简单的Typescript模块,并决定检查是否...

  4. 在一个简单的tic-tac-toe游戏中,有没有简单的方法来检查获胜者?

    我正在为一个高中迷你项目编写一个简单的tic-tac-toe,但我需要它在一个严格的数据量内(不超过112行)。我认为检查每个行、列和十字会很长,所以有没有其他方法可以这样做(您应该看到[[HERE]]注释)?(顺便说一句,我已经知道它看起...

  5. 有没有一种简单的方法来检查一个值是否是if语句中的许多其他值之一?

    目前我有以下代码: if(Settings.Trk2 == 20 || Settings.Trk2 == 50) { await ReviewAppAsync(Settings.Trk2...

  6. 有没有一个简单的html代码可以在内容最少的页面的底部添加一个页脚?(不使用CSS)

    我希望能找到一些在页脚标签中输入代码的方法(就像我的例子一样),将页脚放在内容的底部,而不是仅仅在内容的结尾下面。有没有办法在没有CSS的情况下做到这一点?如果我的术语不正确,很抱歉,我几天前才开始学习html。!doctype html ...

  7. 有没有一种简单的方法来判断存储在一个列表中的许多数据帧是否包含相同的列?

    我有一个包含许多数据帧的列表:df1 - data.frame(A = 1:5, B = 2:6, C = LETTERS[1:5]) df2 - data.frame(A = 1:5, B = 2:6, C = LETTERS[1:5])...

  8. 对于整个firestore集合,有没有简单的方法可以将文档字段值复制到同一文档中的另一个新字段中

    我有一个集合,其中包含以下文档{ id:ABC ...... }复制是否有一种简单的方法可以将该值复制到整个集合的同一文档中的另一个字段中?{ id:ABC ...... id_copy:ABC }复制我正在尝试避免长时...

  9. 有没有办法用perl NYTProf得到一个简单的报告?

    我安装了NYTProf并使用它运行我的代码。尝试获得一个简单的行列表和花费在这些行上的时间。天哪,这个分析器只有html文件报告或数据转储,专为导入数据分析工具而设计。我在一个远程系统上工作,启动浏览器加载file:/// URL需要设置隧...

  10. 有没有一种简单的方法可以循环遍历一个对象,它的值是对象的数组,以便从这些对象的值生成一个列表

    我有一个要导入react页面的JSON对象,如下所示:const obj1 = { January: [ { Id: 1, FileName: some file, Format: Excel...