英文:
I was rotating 4 images around a Circle border and showing the related content of the image. But every time I need only content of one image
问题
我试图通过动画旋转一个圆圈，然后通过停顿一段时间来显示特定图像的内容。但我不知道如何停止它并显示特定图像的内容。
我尝试过的！！
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./rotate.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="parent-circle">
<div class="circle blue"></div>
<div class="circle pink"></div>
<div class="circle lime"></div>
<div class="circle orange"></div>
</div>
<div class="mt-5 content pt-2 ">
<h1>Health Record</h1>
<p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>
</body>
</html>
CSS 代码
body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 20s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
width: 50%;
height: 50%;
margin: -27%;
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
}
.content {
margin-left: 20%;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
我得到的输出是圆圈一直在旋转，我希望它在特定位置停止并显示内容。
我想要的
英文:
I was trying to rotate a circle using animation and show content of specific image by stopping it for some time. But I don't know how to stop it and show the content of specific image.
What I tried!!
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./rotate.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="parent-circle">
<div class="circle blue"></div>
<div class="circle pink"></div>
<div class="circle lime"></div>
<div class="circle orange"></div>
</div>
<div class="mt-5 content pt-2 ">
<h1>Health Record</h1>
<p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>
</body>
</html>
CSS Code
body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 20s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
width: 50%;
height: 50%;
margin: -27%;
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
}
.content {
margin-left: 20%;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
What I want
答案1
得分: 1
我已解决了你的一个问题，并提供了解决其余问题的蓝图。
我已更新你的关键帧以实现你描述的流程。
希望这给你一个更好的思路，如何利用关键帧。
祝你好运！
编辑：由于你制作圆圈的方式（动态宽度/高度），确保在完整页面中打开片段。
我可能会将圆圈的宽度和高度设为固定值（如 200px x 200px），而不是使用 vw。
/* 这里是 CSS 代码的翻译部分 */
<!-- 这里是 HTML 代码的翻译部分 -->
英文:
I have solved one of your problems and given you the blueprint to solve the rest of them.
I've updated your keyframes to achieve the flow you're describing.
I hope this gives you a better idea on how to utilize keyframes.
Good luck!
Edit: because of the way you have made your circles (dynamic width/height) make sure to open the snippet in full page.
I would probably make the circles a fixed width and height (like 200px x 200px) rather than using vw.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 20s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
width: 50%;
height: 50%;
margin: -27%;
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
}
.content {
margin-left: 20%;
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
12.5% {
-webkit-transform: rotate(90deg);
}
25% {
-webkit-transform: rotate(90deg);
}
37.5% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
62.5% {
-webkit-transform: rotate(270deg);
}
75% {
-webkit-transform: rotate(270deg);
}
87.5% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./rotate.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="parent-circle">
<div class="circle blue"></div>
<div class="circle pink"></div>
<div class="circle lime"></div>
<div class="circle orange"></div>
</div>
<div class="mt-5 content pt-2 ">
<h1>Health Record</h1>
<p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论