CSS3实现点击放大的动画实例代码

前言

最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用 css3:@keyfr am es animation即可实现这个效果，下面来看看详细的介绍吧。

技术重点css3: @keyframes &nbs p; animation

示例代码

<!DOCTY PE  ht ML >
<head>
       <style type="text/css">
        @keyframes my First  {
            0% {
                width: 50px;
                h ei ght: 50px;
                top: 10px;
                right: 10px;
            }
            75% {
                width: 60px;
                height: 60px;
                top: 5px;
                right: 5px;
            }
            100% {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
        }
        .warp {
            width: 400px;
            height: 300px;
            pos IT ion: relative;
            background:  # ccc;
        }
        . BT n {
            position: absolute;
            width: 50px;
            height: 50px;
            border:solid 3px #cc3c24;
            top: 10px;
            right: 10px;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn.cur{
            animation: myfirst 0.2s;
        }
        .btn.yes{
            background: #cc3c24;
        }
    </style>
</head>
<body>
<div class="warp">
    <div class="btn"></div>
</div>
<script src="http://liuxiao fan  .COM /demo/js/ jq uery-2.1.4.min.js"></script>
<script>
    VAR  btn = $('.btn');
    btn.click(function () {
        if( $(this).is('.yes')){
            $(this).removeClass('yes');
            $(this).removeClass('cur');
        }else{
            $(this).addClass('yes');
            $(this).addClass('cur');
        }
    });
    btn.on(' webkit AnimationEnd', function () {
        $(this).removeClass('cur');
    });
</script>
</body>
</html>

效果图如下：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

总结

以上是为你收集整理的 CSS3实现点击放大的动画实例代码全部内容，希望文章能够帮你解决 CSS3实现点击放大的动画实例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于CSS3实现点击放大的动画实例代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201381

更新时间：2023-04-27 阅读：25次