CSS3实现点击放大的动画实例代码
author:一佰互联 2019-04-21   click:166

前言

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

技术重点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>

效果图如下:

总结

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