使用Jquery配合CSS3动画和2D变换属性制作动态特效

最新推荐文章于 2020-07-07 17:36:15 发布

Byte_Dance

最新推荐文章于 2020-07-07 17:36:15 发布

阅读量458

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery css

本文链接：https://blog.youkuaiyun.com/Byte_Dance/article/details/81916615

Jquery 同时被 2 个专栏收录

44 篇文章

订阅专栏

css

37 篇文章

订阅专栏

本文介绍了一个使用CSS实现的旋转动画案例，并通过jQuery来控制动画的暂停与播放功能。该示例展示了如何结合CSS3的动画属性和jQuery事件处理，以实现用户交互式的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>
        .di{
            width:100px;
            height: 100px;
            background: red;
            animation: myfirst 1s linear;
            animation-iteration-count:1000;
        }

        @keyframes myfirst
        {
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <div class="di"></div>
    <script>
        var i = true;
        $(".di").click(function(){
            console.log(i)
            if(i){
                $(this).css({"animation-play-state":"paused"})
            }else{
                $(this).css({"animation-play-state":"running"})
            }
            i = !i;
        })
    </script>
</body>
</html>