在本文中，我们将学习使用 CSS 将动画绑定到 div 标签。
div标签用于分隔网页内容的不同部分。它使读者很容易注意到网页的不同部分及其在页面上的特定重要性级别。因此，一个div标签可以用来包含网页的不同部分，也可以根据网页的要求包含文字、图片、动画等。
方法：在 div标签内绑定动画必须遵循几个步骤：
- 创建一个包含 、
</i> <i>、</i> <i><body></i>元素的基本 HTML 页面。</li> <li>创建一个具有特定类名的 <div> 容器并添加另一个 <div> 容器，该容器将在其中包含 HTML 文档的动画部分。这是在 HTML 文档<i>的 <body> 部分中创建的。</i></li> <li>确保<i>包含类名的 <div></i>标签必须与 CSS 属性中的类名匹配。</li> </ul> <p><strong>示例：</strong>以下示例演示如何使用 CSS 将动画绑定到除法元素。</p> <div> <h5 class="code">HTML</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html> <body> <div class="gfg"> <p>GeeksforGeeks</p> <div class="circle_1"></div> </div> <style type="text/css"> .gfg { color: green; float: center; margin-right: 2%; font-size: 60px; } .circle_1 { display: block; width: 100px; height: 100px; background: #056608; border-radius: 50%; background: -webkit-radial-gradient(25px 25px, circle, #228b22, #000); background: -moz-radial-gradient(25px 25px, circle, #228b22, #000); background: radial-gradient(25px 25px, circle, #228b22, #000); /* Animation to spin and move the sphere */ -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite; -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite; -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite; animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite; -webkit-transition: all 1s ease; transition: all 1s ease; position: absolute; left: 0; } /* Spinning the sphere using key frames */ @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* Move sphere from left to right */ @-moz-keyframes moveLeftToRight { 0% { left: -100px; } 100% { left: 100%; } } @-ms-keyframes moveLeftToRight { 0% { left: -100px; } 100% { left: 100%; } } @keyframes moveLeftToRight { 0% { left: -100px; } 100% { left: 100%; } } @-webkit-keyframes moveLeftToRight { 0% { left: -100px; } 100% { left: 100%; } } </style> </body> </html></code></pre> </div> <p></p> <hr/> </div> <p><strong>输出：</strong> </p> <p><img alt="" class="img-fluid" height="286" loading="lazy" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_bind_an_animation_to_a_division_element_using_CSS_?_0.jpg" width="902"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7"></div> <p></p></div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>