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

2020-11-27 来源：汇智旅游网

这次给大家带来CSS3实现点击放大的动画实例，CSS3实现点击放大动画实例的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

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

效果图如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

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