编写html代码先画一个圆圈然后文字围绕着这个圆圈的外周长转同时这个圆圈从左到右移动
<!DOCTYPE html>
<html>
<head>
<title>圆圈动画</title>
<style>
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f00;
position: relative;
overflow: hidden;
animation: move 5s linear infinite;
}
<pre><code> .text {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 100%;
text-align: center;
font-size: 20px;
color: #fff;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes move {
from {
left: 0;
}
to {
left: calc(100vw - 200px);
}
}
</style>
</code></pre>
</head>
<body>
<div class="circle">
<div class="text">
<p>这是一段围绕圆圈旋转的文字</p>
</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/fk38 著作权归作者所有。请勿转载和采集!