记录一个公用的css实现图片的放大缩小

@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.5); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.5);
}
} .showImg {
width: 20px;
height: 20px;
animation: scaleDraw 5s ease-in-out infinite;
}
<img src=""  class="showImg " alt="">

用css3实现图片的放大缩小的更多相关文章

  1. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  2. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  3. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  4. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  5. Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  6. Java界面程序实现图片的放大缩小

    Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...

  7. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  8. [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中

    HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...

  9. Android多点触控技术,实现对图片的放大缩小平移,惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

随机推荐

  1. sql字符串常用函数

    1.replace  REPLACE(String,from_str,to_str) 即:将String中所有出现的from_str替换为to_str 2.left  left(String,2) 从 ...

  2. 编译x64c++出错,errorC1900:P1和P2之间 Il 不匹配问题

    搜索了下相关资料,有一个说法是编译x64时本地缺失一些东西,2015安装update3就行. 我的是2013update4,找了下最新的有update5,安装然而并没有什么用. 最后还是重新找对应版本 ...

  3. map的嵌套 + 例题(水果)

    水果 http://acm.hdu.edu.cn/showproblem.php?pid=1263 Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~Joe经营着一个 ...

  4. C#chart图表的应用

    在图表中,x轴代表类别,y轴代表数值(好比类与他们的属性) 这是数据库中的数据,下面我们选前5辆车,在图表中显示他们的名字,油耗,功率,价格 创建查询数据的类 class CarDA { public ...

  5. 14 微服务电商【黑马乐优商城】:day02-springcloud(理论篇一:HttpClient的简单使用)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一: ...

  6. 源码分析Dubbo服务消费端启动流程

    通过前面文章详解,我们知道Dubbo服务消费者标签dubbo:reference最终会在Spring容器中创建一个对应的ReferenceBean实例,而ReferenceBean实现了Spring生 ...

  7. 多对多的三种创建方式-forms相关组件-钩子函数-cookie与session

    多对多的三种创建方式 1.全自动(推荐使用的**) 优势:第三张可以任意的扩展字段 缺点:ORM查询不方便,如果后续字段增加更改时不便添加修改 manyToManyField创建的第三张表属于虚拟的, ...

  8. [LC] 430. Flatten a Multilevel Doubly Linked List

    You are given a doubly linked list which in addition to the next and previous pointers, it could hav ...

  9. 25)PHP,数据库定义

    (1)数据库定义语句: create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]: 说明: ,if not exists ...

  10. linux 上安装 java

    一.源码安装 1.本地下载 java, 并上传到 linux 上 2.解压文件  tar -zxvf jdk-7u72-linux-i586.gz 3.配置环境变量  vi /etc/profile ...