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

前端  /  管理员 发布于 7年前   262

前言

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

效果图如下：

总结

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


  • 上一条：
    利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
    下一条：
    css中px、em和rem的区别总结

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客