编写html代码实现环形旋转文字
<!DOCTYPE html>
<html>
<head>
<title>环形旋转文字</title>
<style type="text/css">
.container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: 2px 2px black;
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.text span {
display: block;
width: 100%;
height: 20px;
transform-origin: 50% 0;
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="container">
<div class="circle">
<div class="text">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
<span>J</span>
<span>K</span>
<span>L</span>
<span>M</span>
<span>N</span>
<span>O</span>
<span>P</span>
<span>Q</span>
<span>R</span>
<span>S</span>
<span>T</span>
<span>U</span>
<span>V</span>
<span>W</span>
<span>X</span>
<span>Y</span>
<span>Z</span>
</div>
</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/eFh0 著作权归作者所有。请勿转载和采集!