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

上一篇: 浅谈CSS到底会不会阻塞页面渲染下一篇:CSS line-height的如何继承的问题

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

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了CSS3实现点击放大的动画实例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

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

示例代码

<!DOCTYPE htML>
<head>
       <style type="text/css">
        @keyframes myFirst {
            0% {
                width: 50px;
                height: 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;
            posITion: relative;
            background: #ccc;
        }
        .BTn {
            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://liuxiaofan.COM/demo/js/jquery-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('webkitAnimationEnd', function () {
        $(this).removeClass('cur');
    });
</script>
</body>
</html>

效果图如下：

总结

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

脚本宝典总结

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

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：CSS3

上一篇: 浅谈CSS到底会不会阻塞页面渲染下一篇:CSS line-height的如何继承的问题

猜你在找的CSS相关文章