css画圆,如何用纯css实现一个动态画圆环效

发布网友发布时间：2022-04-28 11:36

我来回答

共2个回答

懂视网时间：2022-04-28 15:57

本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 10 个 <div> 子元素，每个 <div> 子元素内还有一个 <span> 子元素：

<figure class="container">
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
 <div><span></span></div>
</figure>

定义容器尺寸：

.container {
 width: 17em;
 height: 17em;
 font-size: 16px;
}

定义子元素的尺寸，和容器相同：

.container {
 position: relative;
}

.container div {
 position: absolute;
 width: inherit;
 height: inherit;
}

在子元素的正中画一个黄色的小方块：

.container div {
 display: flex;
 align-items: center;
 justify-content: center;
}

.container span {
 position: absolute;
 width: 1em;
 height: 1em;
 background-color: yellow;
}

增加让小方块左右移动的动画效果，动画时长还会在后面用到，所以定义成变量：

.container span {
 --duration: 2s;
 animation: move var(--duration) infinite;
}

@keyframes move {
 0%, 100% {
 left: calc(10% - 0.5em);
 }

 50% {
 left: calc(90% - 0.5em);
 }
}

用贝赛尔曲线调整动画的时间函数，使小方块看起来就像在左右两侧跳来跳去：

.container span {
 animation: move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite;
}

增加小方块变形的动画，使它看起来有下蹲起跳的拟人效果：

.container span {
 animation: 
 move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite,
 morph var(--duration) ease-in-out infinite;
}

@keyframes morph {
 0%, 50%, 100% {
 transform: scale(0.75, 1);
 }

 25%, 75% {
 transform: scale(1.5, 0.5);
 }
}

至此，完成了 1 个方块的动画。接下来设置多个方块的动画效果。

为子元素定义 CSS 下标变量：

.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }

旋转子元素，使小方块分布均匀地在容器的四周，围合成一个圆形：

.container p {
 transform: rotate(calc(var(--n) * 40deg));
}

设置动画延时，现在看起来就像是一群小方块贴着一个圆的内边线在旋转了（但实际上没有任何元素在做旋转运动，大脑感觉到的旋转是一种错觉）：

.container span {
 animation-delay: calc(var(--duration) / 9 * var(--n) * -1);
}

最后，为小方块上色：

.container span {
 background-color: hsl(calc(var(--n) * 80deg), 100%, 70%);
}

大功告成！想要了解更多css知识，可以去Gxlcmscss教程栏目去学习一下。

热心网友时间：2022-04-28 13:05

给你一个例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css动画</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root, html, body {
font-family: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
background: #222;
color: white;
}
h1 {
text-align: center;
margin: 1rem auto 2rem;
font-weight: normal;
}
p {
margin: 1rem;
}
.row {
width: 80%;
height: 150px;
margin: 2rem auto;
}
.cell {
display: inline-block;
width: 49%;
text-align: center;
}
.circle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: whiteSmoke;
box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 20px;
background: whiteSmoke;
box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;
}
.loader {
background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);
animation: spin 1s infinite linear;
}
.loader:before {
display: block;
content: '';
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: #222;
border-radius: 50%;
}
.gelatine {
animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
.spin {
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.elastic-spin {
animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
from { transform: rotate(0deg); }
to { transform: rotate(720deg); }
}
.pulse {
animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
from { transform: scale(0.8); }
to { transform: scale(1.2); }
}
.flash {
animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
from { opacity: 1; }

to { opacity: 0; }
}
.hithere {
animation: hithere 1s ease infinite;
}
@keyframes hithere {
30% { transform: scale(1.2); }
40%, 60% { transform: rotate(-20deg) scale(1.2); }
50% { transform: rotate(20deg) scale(1.2); }
70% { transform: rotate(0deg) scale(1.2); }
100% { transform: scale(1); }
}
.grow {
animation: grow 2s ease infinite;
}
@keyframes grow {
from { transform: scale(0); }
to { transform: scale(1); }
}
.fade-in {
animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-out {
animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
.bounce {
animation: bounce 2s ease infinite;
}
@keyframes bounce {
70% { transform:translateY(0%); }
80% { transform:translateY(-15%); }
90% { transform:translateY(0%); }
95% { transform:translateY(-7%); }
97% { transform:translateY(0%); }
99% { transform:translateY(-3%); }
100% { transform:translateY(0); }
}
.bounce2 {
animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.shake {
animation: shake 2s ease infinite;
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.flip {
backface-visibility: visible !important;
animation: flip 2s ease infinite;
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
.swing {
transform-origin: top center;
animation: swing 2s ease infinite;
}
@keyframes swing {
20% { transform: rotate(15deg); }

40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }

80% { transform: rotate(-5deg); }

100% { transform: rotate(0deg); }
}
.wobble {
animation: wobble 2s ease infinite;
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.fade-in-down {
animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-left {
animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fade-out-down {
animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fade-out-right {
animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.bounce-in {
animation: bounce-in 2s ease infinite;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% { transform: scale(.9); }
100% { transform: scale(1); }
}
.bounce-in-right {
animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
.bounce-out {
animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
0% { transform: scale(1); }
25% { transform: scale(.95); }
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
.bounce-out-down {
animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
0% { transform: translateY(0); }
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.rotate-in-down-left {
animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotate-in-up-left {
animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.hinge {
animation: hinge 2s ease infinite;
}
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}
.roll-in {
animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.roll-out {
animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div class="row">
<div class="cell">
<div class="circle loader"></div>
<p>loader</p>
</div>
<div class="cell">
<div class="circle gelatine"></div>
<p>gelatine</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle spin"></div>
<p>spin</p>
</div>
<div class="cell">
<div class="circle elastic-spin"></div>
<p>elastic spin</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle pulse"></div>
<p>pulse</p>
</div>
<div class="cell">
<div class="circle flash"></div>
<p>flash</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="square hithere"></div>
<p>hi there!</p>
</div>
<div class="cell">
<div class="circle grow"></div>
<p>grow</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle fade-in"></div>
<p>fade in</p>
</div>
<div class="cell">
<div class="circle fade-out"></div>
<p>fade out</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle bounce"></div>
<p>bounce</p>
</div>
<div class="cell">
<div class="circle bounce2"></div>
<p>bounce 2</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle shake"></div>
<p>shake</p>
</div>
<div class="cell">
<div class="circle flip"></div>
<p>flip</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle swing"></div>
<p>swing</p>
</div>
<div class="cell">
<div class="circle wobble"></div>
<p>wobble</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle fade-in-down"></div>
<p>fade in down</p>
</div>
<div class="cell">
<div class="circle fade-in-left"></div>
<p>fade in left</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle fade-out-down"></div>
<p>fade out down</p>
</div>
<div class="cell">
<div class="circle fade-out-right"></div>
<p>fade out right</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle bounce-in"></div>
<p>bounce in</p>
</div>
<div class="cell">
<div class="circle bounce-in-right"></div>
<p>bounce in right</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle bounce-out"></div>
<p>bounce out</p>
</div>
<div class="cell">
<div class="circle bounce-out-down"></div>
<p>bounce out down</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle rotate-in-down-left"></div>
<p>rotate in down left</p>
</div>
<div class="cell">
<div class="circle rotate-in-up-left"></div>
<p>rotate in up left</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle roll-in"></div>
<p>roll in</p>
</div>
<div class="cell">
<div class="circle roll-out"></div>
<p>roll out</p>
</div>
</div>
<div class="row">
<div class="cell">
<div class="circle hinge"></div>
<p>hinge</p>
</div>
</div>
</body>
</html>

css画圆,如何用纯css实现一个动态画圆环效

80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .roll-in { animation: roll-in 2s ease infinite; } @keyframes roll-in { 0% { opacity: 0; tran...

如何用纯css实现一个动态画圆环效果

2. 然后用上下两层挡板遮住这个圆环，通过旋转挡板将圆环慢慢露出，过程如下图所示：通过将下层挡板旋转180deg就能够实现将下半圆慢慢画出的效果，画完以后就需要将其隐藏起来，那该如何实现呢？这里我用了opacity这个属性，当100%时将其设置为0，同时设置animation-fill-mode: forwards;这样就隐藏了 0%...

如何用纯css实现一个逐渐出现从无到有的圆

先画一个圆，用border-radius 画一个，然后给这个属性加上opacity来先让这个圆完全透明，opacity = 1；再利用transition加一个过渡效果，像这样： transition： all 2s;最后加上hover，这样就可以使这个圆逐渐出现了。hover里面要加上 opacity：0；还有问题可以追问，纯手打。

html、css怎么实现一个圆盘(类环形图)?

1. 在使用代码实现功能前，先理解原理及逻辑关系，结合现有技能，选择合适方法和技术。分析后，根据理解的逻辑，采用合适方式实现。在设置CSS样式时，明确内外层``的尺寸，使用margin使内层``相对于外层居中。但需注意外边距塌陷问题，通过`overflow: hidden`解决。详情可参考相关文章。3. 实现此案例的方法...

用css如何制作圆环?

看下css样式yuan1， yuan2的定义，如图，主要是通过设置border-radius来让div显示成圆形。先看下现在的显示效果，就是二个大小不一的圆。把二个圆重叠起来，组成一个圆环。我们修改下yuan1, yuan2的样式代码，如图，让二个圆都是绝对定位，position: absolute; 并且设置yuan1的z-index: 2; 让他...

一个半圆沿虚线旋转怎么画

要绘制一个半圆沿着虚线旋转的效果，首先在SVG环境中，利用circle标签画出半圆。然后，使用path标签在半圆的边缘描绘出一条虚线。接下来的关键是利用CSS的animation属性，设定一个旋转动画，让半圆沿着虚线路径进行旋转。确保所有元素都放在一个svg标签内，设定合适的画布尺寸，并在style标签中详细定义样式。通...

使用CSS Houdini 绘制平滑圆角

我们只画了一种特殊的超椭圆，即方圆形。要绘制任意指数的超椭圆，我们可以使用 CSS 自定义属性。首先定义自定义属性 --smooth-corners，然后从 registerPaint 方法中获取。在 paint 方法中，我们通过 styleMap 获取 --smooth-corners 属性值并传递给 n。这样，我们可以在 CSS 中使用 --smooth-corners...

如何使用Css实现圆角边框的效果

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。比如,下面是一个div方框:现在设置它的圆角半径为15px:border-radius: 15px;这条语句同时将每个圆角的"水平半径"(horizontal radius...

用css怎么做出五个圆平均围绕在一个圆四周

这个效果是动态的,请复制下面所有代码到html里，运行网页即可 <!DOCTYPE html>.load {width: 1.3em;height: 1.3em;border-radius: 20px;animation: xuanzhuan 2s infinite;background: red;margin: 48% auto;zoom: 3.0;}@keyframes xuanzhuan {0% {-webkit-transform: rotate(0deg);transform:...

CSS 动画 - 如何让元素动起来?

在优化 CSS 动画时，可以使用 transform 属性来替代 width、height、margin、padding 等属性，以支持硬件加速。使用 3D 变形可以开启 GPU 加速，提高动画流畅度。尽量减少使用高消耗的属性，如 box-shadow、gradients、background-attachment: fixed 等。使用 position: fixed 或 position: absolute 可以让...

用css实现动态背景怎样用纯css实现下拉菜单如何动态选择css 纯css实现折叠 css动态效果纯css酷炫效果纯css复杂几何 css样式动态动态生成css