【CSS3】异步动画

最新推荐文章于 2021-08-03 21:43:59 发布

云端漂移

最新推荐文章于 2021-08-03 21:43:59 发布

阅读量1.5k

点赞数

分类专栏： css diary

本文链接：https://blog.csdn.net/jean_lee/article/details/46830433

版权

该博客探讨了如何使用 CSS3 实现异步动画效果，通过点击 start 和 stop 按钮来控制动画的开始与结束，揭示了CSS3在动效控制上的灵活性和实用性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>css-animation</title>
        <style>
            .control {
                position: absolute;
                width: 120px;
                bottom: 10%;
                left: 50%;
                border-radius: 8px;
                background-color: black;
                font-size: 32px;
                line-height: 1.6;
                color: white;
                text-align: center;
                font-variant: small-caps;
                transform: translateX(-50%);
                transition: 0.12s linear 0s;
                cursor: pointer;
            }
            .control:hover {
                background-color: #369;
            }
            .dot {
                position: absolute;
                width: 20px;
                height: 20px;
                top: 100px;