如何使用HTML和CSS创建彩虹色的圆圈?

我正在尝试使用HTML和CSS重新创建这个gif，但这就是我卡住的地方。这是动图:https://www.link-elearning.com/linkdl/coursefiles/1452/ADCSS9_assigment_animation1.gif

这是我到目前为止所做的，但我卡住了:

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
padding-top: 2px;
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
background: rgb(32, 6, 146)
}

@keyframes scaleIn {
from {
transform: scale(.5, .5);
opacity: .5;
}
to {
transform: scale(2.5, 2.5);
opacity: 0;
}
}
</style>
</head>
<body style="background-color:#050210;">
<div class="circle" style="animation-delay: -2s"></div>
<div class="circle" style="animation-delay: -1s"></div>
<div class="circle" style="animation-delay: -0"></div>
</body>
</html>

获得彩虹色轮廓的一种方法是使用位于较暗的内部div后面的另一个div。这种彩虹色的轮廓可以通过使用线性梯度来实现。所有CSS动画都设置为infinite，以允许它们重复运行。在这里，我使用了一些CSS变量来设置由变量名前面的--表示的圆圈的大小。值得注意的是，将其放在包装器/容器div中而不是下面的绝对定位中可能是一个好主意。中心的脉冲也可以进行一些调整。按下面的运行代码片段按钮查看结果:

body {
background: rgba(6, 2, 20, 1);
}
#Blurry_Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
filter: blur(20px);
}
#Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
}
#Large_Circle {
position: absolute;
--Circle_Diameter: 175px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(6, 2, 20, 1);
}
#Medium_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow 2s linear infinite;
}
#Small_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow_2 2s linear infinite;
}
@keyframes Rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes Grow {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(17);
opacity: 0;
}
51% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes Grow_2 {
0% {
transform: scale(0);
opacity: 0;
}
40% {
transform: scale(0);
opacity: 0;
}
41% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(17);
opacity: 0;
}
}

<div id="Blurry_Rainbow_Circle"></div>
<div id="Rainbow_Circle"></div>
<div id="Large_Circle"></div>
<div id="Medium_Circle"></div>
<div id="Small_Circle"></div>

我不知道你在哪里学习。但这是一项研究....Itadakimas……谢谢这顿饭……我喜欢做这件事

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.body {
background-color: #050210;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle {
position: absolute;
height: 230px;
width: 230px;
border-radius: 50%;
background: rgb(32, 6, 146)
}
.animate {
transform: translate(-50%, -50%);
animation: scaleIn 1.9s infinite;
}
.border {
/* --b: 5px; */
/* border width*/
animation: rotate 3s infinite linear;
z-index: 0;
/* scale: 4.5; */
--b: 10px;
--c: linear-gradient(140deg, red, yellow, green);
background: transparent;
box-shadow: 5px 5px 19px #54aa00, -5px -5px 19px #ff5a00, -5px 5px 19px #f9e203, 5px -5px 19px #f9e203;
}
.border:after {
content: "";
display: inline-block;
padding-top: 100%;
}
.border:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c, linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: 50%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
@keyframes scaleIn {
from {
transform: scale(.15, .15);
opacity: .5;
}
to {
transform: scale(1, 1);
opacity: 0;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

<div class="body">
<div class="circle border"></div>
<div class="circle animate" style="animation-delay: -0.95s"></div>
<div class="circle animate" style="animation-delay: 0s"></div>
</div>

Whew，纠正了所有的错误…我没有选择你的颜色

相关内容

最新更新

热门标签：