HTML 代码实现字母 O 旋转动画
<!DOCTYPE html>
<html>
<head>
<title>字母 O 旋转动画</title>
<style>
#text {
font-size: 80px;
font-weight: bold;
text-align: center;
margin-top: 50px;
animation: rotate 2s linear infinite;
}
<pre><code> @keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</code></pre>
</head>
<body>
<input type='text' id='inputText'>
<button onclick='rotateText()'>旋转</button>
<div id='text'></div>
<pre><code><script>
function rotateText() {
var input = document.getElementById('inputText').value;
if (input.toLowerCase() === 'o') {
document.getElementById('text').innerHTML = input;
} else {
document.getElementById('text').innerHTML = '';
alert('请输入字母 O');
}
}
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/nWfm 著作权归作者所有。请勿转载和采集!