首页 / CSS3 / 详解用CSS3实现点击放大的动画实例代码

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解用CSS3实现点击放大的动画实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1167字，纯文字阅读大概需要2分钟。

内容图文

前言

最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用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>
<p class="warp">
    <p class="btn"></p>
</p>
<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实现点击放大的动画实例代码 - 文章图片

更多详解用CSS3实现点击放大的动画实例代码相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的详解用CSS3实现点击放大的动画实例代码全部内容，希望文章能够帮你解决详解用CSS3实现点击放大的动画实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/414573.html

来源：【匿名】