HTML 代码实现文字绕自行车轮旋转动画
<!DOCTYPE html>
<html>
<head>
<title>自行车轮运动</title>
<style>
#bike {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid black;
animation: wheel-rotate 2s infinite linear;
}
<pre><code> #text-box {
position: absolute;
top: 100px;
left: 100px;
transform: translate(-50%, -50%);
width: 200px;
height: 50px;
text-align: center;
border: 2px solid black;
font-size: 20px;
padding: 10px;
}
#rotate-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
@keyframes wheel-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</code></pre>
</head>
<body>
<div id='bike'></div>
<div id='text-box'>
<input type='text' id='input-text' placeholder='请输入文字'>
</div>
<button id='rotate-btn' onclick='rotateText()'>开始旋转</button>
<pre><code><script>
function rotateText() {
var text = document.getElementById('input-text').value;
var bike = document.getElementById('bike');
var bikeRadius = bike.offsetWidth / 2;
var circumference = 2 * Math.PI * bikeRadius;
var textLength = text.length;
var angleIncrement = 360 / textLength;
var currentAngle = 0;
var textWrap = document.createElement('div');
textWrap.style.position = 'absolute';
textWrap.style.top = '50%';
textWrap.style.left = '50%';
textWrap.style.transform = 'translate(-50%, -50%)';
bike.appendChild(textWrap);
for (var i = 0; i < textLength; i++) {
var letter = document.createElement('span');
letter.innerText = text.charAt(i);
letter.style.position = 'absolute';
letter.style.top = '0px';
letter.style.left = '0px';
letter.style.transformOrigin = '0% 100%';
letter.style.transform = 'rotate(' + currentAngle + 'deg)';
currentAngle += angleIncrement;
textWrap.appendChild(letter);
}
var letterList = textWrap.children;
for (var i = 0; i < letterList.length; i++) {
var letter = letterList[i];
var letterWidth = letter.offsetWidth;
var letterDistance = (currentAngle - angleIncrement) / 360 * circumference;
var letterAngle = (currentAngle - angleIncrement / 2) * Math.PI / 180;
var letterX = Math.sin(letterAngle) * (bikeRadius + letterDistance - letterWidth / 2);
var letterY = -Math.cos(letterAngle) * (bikeRadius + letterDistance - letterWidth / 2);
letter.style.top = letterY + 'px';
letter.style.left = letterX + 'px';
}
textWrap.remove();
bike.appendChild(textWrap);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nWgc 著作权归作者所有。请勿转载和采集!