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


Posted in HTML / CSS onFebruary 27, 2017

前言

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

效果图如下:

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

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

总结

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

HTML / CSS 相关文章推荐
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 #HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 #HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 #HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 #HTML / CSS
You might like
Protoss兵种对照表
2020/03/14 星际争霸
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
社团成立邀请函
2014/01/08 职场文书
股权投资意向书
2014/04/01 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle