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样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP与MySQL交互使用详解
2006/10/09 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python解析json实例方法
2013/11/19 Python
python实现udp数据报传输的方法
2014/09/26 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
分分钟入门python语言
2018/03/20 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
三星法国官方网站:Samsung法国
2019/10/31 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
21岁生日感言
2014/02/27 职场文书
优秀广告词大全
2014/03/19 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
边城读书笔记
2015/06/29 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Python实现socket库网络通信套接字
2021/06/04 Python