教师节专属超酷动画HTML代码示例 - 让祝福动起来 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>教师节快乐!</title>
    <style>
        body {
            background-color: #f2f2f2;
            text-align: center;
            font-family: Arial, sans-serif;
        }
<pre><code>    #animation {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="animation">
        <img src="teacher.gif" alt="教师节快乐!" width="300" height="300">
    </div>
<pre><code>&lt;script&gt;
    var animation = document.getElementById(&quot;animation&quot;);
    
    // 设置动画效果
    animation.style.animation = &quot;rotate 2s infinite linear&quot;;
    
    // 定义动画关键帧
    var keyframes = `@keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }`;
    
    // 创建一个样式元素并将关键帧添加到其中
    var style = document.createElement(&quot;style&quot;);
    style.innerHTML = keyframes;
    
    // 将样式元素添加到文档头部
    document.head.appendChild(style);
&lt;/script&gt;
</code></pre>
</body>
</html>
<p>在上面的代码中，通过使用CSS的<code>@keyframes</code>规则和JavaScript的DOM操作，我们创建了一个旋转动画效果。你可以将自己喜欢的动画文件（如<code>teacher.gif</code>）替换到代码中的<code>src</code>属性中，然后修改动画的尺寸和样式来适应你的需求。祝你的教师节快乐！</p>