css - 如何使位置绝对css动画响应?
问题描述
所以我得到了这个css动画,其中5个圆圈在一些文本之间旋转;
(每个尺寸都不一样)
#circle .circle1{
position: absolute;
top: 1330px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid transparent;
border-bottom: 20px solid #5E0DAC;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle2{
position: absolute;
top: 1380px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 400px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #B90091;
border-right: 20px solid #B90091;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
animation-name: circle2;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle3{
position: absolute;
top: 1480px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 200px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid transparent;
border-bottom: 20px solid #5E0DAC;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle4{
position: absolute;
top: 1430px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid #5E0DAC;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 13s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle5{
position: absolute;
top: 1530px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
border-radius: 50%;
display: inline-block;
background-color: #B90091;
}
@keyframes circle2{
0% {transform: rotate(-360deg)}
}
@keyframes circle1{
0% {transform: rotate(360deg)}
}
<html>
<div id="circle">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</html>
使此动画响应的最简单方法是什么?为此,我必须在媒体查询中编辑每个像素的高度和宽度。
请问有没有更简单的方法。
干杯
解决方案
这可能不是您问题的完整答案,因为它不是 100% 响应的,但它是使媒体查询更容易的起点。
代码更加基于分类,例如每个环都有一个紫色或粉红色类来获取它的颜色,并且圆圈之间的所有公共元素现在都在一个类中。
差异,例如动画时间和位置现在针对每个环的各个 id,更重要的是,环是基于相对于彼此的百分比。我以500px为100%的外环为基础,位置元素是相对于此的。
我添加了一个新的容器 div 来保存和定位你认为合适的圆形动画。它会尝试将自己推出以适应该空间的尺寸,因此您可以根据需要在媒体查询中调整其高度和宽度。您还可以调整媒体查询中的边框宽度等内容,使其看起来更接近整体大小。
老实说,如果我要从头开始处理这样的动画,我会考虑基于 SVG 的解决方案。
.circleHolder {
height: 540px; /* main ring is 500px + the 40px (for the border @20px) */
width: 540px; /* border-width:20px; /* media queries should target this value and the height */
top: 200px;
left: 200px;
position:absolute;
}
#circle {
height: 100%;
width: 100%;
position:relative;
}
.circle {
border-radius: 50%;
display: inline-block;
margin: 0 auto;
text-align:center;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
position:absolute;
border-style: solid;
border-width:20px; /* media queries should target this value */
}
.purpleCircle {
border-top-color: #5E0DAC;
border-right-color: transparent;
border-bottom-color: #5E0DAC;
border-left-color: transparent;
}
.pinkCircle {
border-top-color: #B90091;
border-right-color: #B90091;
border-bottom-color: transparent;
border-left-color: transparent;
}
.circle1{
height: 100%;
width: 100%;
animation-name: circle1;
animation-duration: 18s;
}
.circle2{
top: 10%;
left: 10%;
height: 80%;
width: 80%;
animation-name: circle2;
animation-duration: 8s;
}
.circle3{
top: 30%;
left: 30%;
height: 40%;
width: 40%;
animation-name: circle1;
animation-duration: 6s;
}
.circle4{
top: 20%;
left: 20%;
height: 60%;
width: 60%;
animation-name: circle1;
animation-duration: 13s;
}
.circle5{
top: 40%;
left: 40%;
height: 20%;
width: 20%;
background-color: #B90091;
}
@keyframes circle2{
0% {transform: rotate(-360deg)}
}
@keyframes circle1{
0% {transform: rotate(360deg)}
}
<html>
<div class="circleHolder">
<div id="circle">
<div class="circle circle1 purpleCircle"></div>
<div class="circle circle2 pinkCircle"></div>
<div class="circle circle3 purpleCircle"></div>
<div class="circle circle4 purpleCircle"></div>
<div class="circle circle5 pinkCircle"></div>
</div>
</div>
</html>
推荐阅读
- java - 将 Map 从 SpringBoot 后端发送到 Angular View 并将其保存在 LocalStorage
- xml - Oracle SQL Developer 隐藏了我的部分 XML 输出
- php - 计算自定义帖子类型分类法 (WordPress) 中的帖子数量
- windows - 是否可以在 hta 文件上添加数字签名?
- python - 如何使用给定的键将文本文件转换为 json?
- python - Pandas 转换列的数据类型,但不转换其内容
- mysql - SequelizeForeignKeyConstraintError 尝试按 Id 更新时
- verilog - verilog ICARUS 工具中的以下语法错误是什么?
- react-native - React Native Navigation:从堆栈导航器中删除屏幕
- swift - 如何以编程方式从 UIViewRepresentable 触发 UIMenu