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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 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
php生成随机数或者字符串的代码
2008/09/05 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
numpy.array 操作使用简单总结
2019/11/08 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
高级工程师岗位职责
2013/12/15 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
村安全生产责任书
2014/08/25 职场文书
公司停电通知
2015/04/15 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
队列队形口号
2015/12/25 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python