HTML 轮盘文字动画：让文字绕着自行车轮转动
<!DOCTYPE html>
<html>
<head>
<title>Bicycle Wheel Text Animation</title>
<style>
#wheel {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 20px;
font-weight: bold;
color: blue;
display: none;
}
#btn {
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='wheel'></div>
<input type='text' id='input-text'>
<button id='btn'>Rotate Text</button>
<pre><code><script>
const wheel = document.querySelector('#wheel');
const text = document.querySelector('#text');
const input = document.querySelector('#input-text');
const btn = document.querySelector('#btn');
const radius = wheel.offsetWidth / 2;
const circumference = 2 * Math.PI * radius;
btn.addEventListener('click', () => {
const textContent = input.value;
if (textContent) {
text.textContent = textContent;
text.style.display = 'block';
const duration = 10 * textContent.length; // Set the duration of the animation based on the length of the text
text.animate([
{ transform: 'rotate(0deg) translateX(' + radius + 'px)' },
{ transform: 'rotate(360deg) translateX(' + radius + 'px)' }
], {
duration: duration,
iterations: Infinity
});
}
});
wheel.appendChild(text);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nWgw 著作权归作者所有。请勿转载和采集!