1、代码：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>JS过渡和变形效果演示</title>
　　<style type="text/css">
　　　　*{
　　　　　　margin: 0;
　　　　　　padding: 0;
　　　　}
　　　　.container{
　　　　　　width: 158px;
　　　　　　height: 183px;
　　　　　　margin: 0 auto;
　　　　　　border:1px solid #fad282;
　　　　　　overflow: hidden;
　　　　}
　　　　.container img{
　　　　　　transition: all 1.2s ease;
　　　　}
　　　　.container img:hover{
　　　　　　transform: scale(1.2);
　　　　}
　　</style>
</head>
<body>
　　<div class="container">
　　　　<img src="html5.png" alt="html5.png">
　　</div>
</body>
</html>

2、演示：http://www.nxl123.cn/bokeyuan/2018080201/

(滑过前)

（滑过时，图片放大）

JS过渡和变形效果演示(举例:鼠标滑过图片放大) --JS案例的更多相关文章

  1. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  2. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  3. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  4. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  6. CSS3 鼠标划上图片放大

    td img{transition: all 1s}/*鼠标划上,图片1s全部显示完成*/ td img:hover{ transform: scale(5) translateX(50%) tran ...

  7. js特效：鼠标滑过图片时切换为动图

    效果展示 事前准备 一张普通的静态图+与其对应的gif图. 实现思路 获取图片的src,改变其后缀,使其变成与之对应的gif图片.(很简单有木有= =) 具体实现 编写html代码 <div c ...

  8. html5/CSS3鼠标滑过图片特效插件

    在线演示 本地下载

  9. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

随机推荐

  1. 详解重定向（HTTP状态码301/302/303/307/408）附例子

    本文为原创文章,转载请注明出处. 今天打算好好把状态码301.302.303.307.308好好撸一遍,并会测试下一些例子. 状态码的解释 我们都知道重定向与这几种状态码有关,来看下这几种HTTP状态 ...

  2. topcoder srm 500 div1

    problem1 link 如果decisions的大小为0,那么每一轮都是$N$个人.答案为0. 否则,如果答案不为0,那么概率最大的一定是一开始票数最多的人.因为这个人每一轮都在可以留下来的人群中 ...

  3. ODAC（V9.5.15) 学习笔记（四）TOraDataSet

    名称 类型 说明 SequenceMode TSequenceMode ODAC可以直接利用Oracle中的序列对象为表的主键赋值,从而实现主键自动增长的功能.该属性决定了在什么场合下使用序列: sm ...

  4. Python3 tkinter基础 Canvas bind 鼠标左键点击时，在当前位置画椭圆形

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Centos7.5安装VirtualBox-5.2

    1.查看自己的内核版本 [root@localhost /]# rpm -qa |grep kernel kernel-tools-libs-3.10.0-862.6.3.el7.x86_64 ker ...

  6. 为静态博客生成器WDTP移植了一款美美哒主题

    前言 关于这个主题的移植后公布,我已经联系了主题作者并取得同意,这个主题是一夜涕所写的Sgreen,预览图见下 关于WDTP 就是一个很方便很便携很快速的cpp编写的带gui跨平台的开源的静态博客生成 ...

  7. [蓝桥] 历届试题 错误票据 (List用法，空格处理）

    时间限制:1.0s 内存限制:256.0MB 问题描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人 ...

  8. Unity3D学习笔记（三十三）：矩阵

    矩阵 矩阵就是一行和列组织起来的矩形数字块. 矩阵可以理解为是向量的数组.   矩阵的维度和记法 矩阵的维度是包含多少行多少列!例如1行2列的矩阵 记法:矩阵m中,对于第1行第2列的元素,我们记为m1 ...

  9. 【创建模式】--Singleton

    设计模式之Singleton(单态) 单态定义: Singleton 模式主要作用是保证在Java应用程序中,一个类Class 只有一个实例存在. 在很多操作中,比如建立目录  数据库链接都需要这样的 ...

  10. 17秋 SDN课程 第五次上机作业

    17秋 SDN课程 第五次上机作业 Project:https://github.com/Wasdns/new_balance Slide is available at https://github ...