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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python实现的批量下载RFC文档
2015/03/10 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python动态网页批量爬取
2016/02/14 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
国家助学金获奖感言
2014/01/31 职场文书
公司副总经理任命书
2014/06/05 职场文书
医学求职自荐信
2014/06/21 职场文书
优秀班组事迹材料
2014/12/24 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
公司人事管理制度
2015/08/05 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书