实现如下效果:当鼠标移动到图片上是图片有类似于放大镜放大的效果

transition : CSS属性  时间 
当transition中监测的css属性发生变化时,会触发动画
.img_box img{
cursor: pointer;
transition: all .3s;
-webkit-transition: all .3s;
}
.img_box img:hover{
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari and Chrome */
}

常见二维变化除了放大 scale( ) 还有旋转 rotate(30deg)

CSS3 过渡动画的更多相关文章

  1. css3过渡动画 transition

    transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...

  2. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  3. css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)

    css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3 有几个属性: linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). ...

  4. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  5. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  6. CSS3学习(CSS3过渡、CSS3动画)

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  7. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  8. CSS3 过渡、动画、多列、用户界面

    CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...

  9. CSS3过渡与动画

    一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...

随机推荐

  1. WhereHows前后端配置文件

    前端: # This is the main configuration file for the application. # ~~~~~ # Secret key # ~~~~~ # The se ...

  2. [转]一图读懂JVM架构解析

    每个Java开发人员都知道字节码经由JRE(Java运行时环境)执行.但他们或许不知道JRE其实是由Java虚拟机(JVM)实现,JVM分析字节码,解释并执行它.作为开发人员,了解JVM的架构是非常重 ...

  3. defaultProps和propTypes

    在上一篇文章中总结了父子组件的数据传递,下面先来简单的回顾一下之前的内容: 此时,子组件中div里面的数据依赖于父组件传递过来的数据,那么当父组件没有给子组件传递数据时,子组件div里面就没有了数据了 ...

  4. 服务注册发现consul之二:在Spring Cloud中使用Consul实现服务的注册和发现

    首先安装consul环境,参照之前的文章:<服务注册发现consul之一:consul介绍及安装>中的第一节介绍. Spring Cloud使用Consul的服务与发现 1.导入依赖pri ...

  5. opengl 结果白屏解决方法

    最近图形学在做上机实验,需要使用到opengl实验操作,可是我的电脑不给力, 不能显示正确结果,每次都是白屏,无法显示应有的结果. 1.问题:opengl 白屏 2.环境:win7系统,64位.机型是 ...

  6. Linux 防火墙和SELinux的开启和关闭

    防火墙(firewalld) 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机自关闭 systemctl disable firewalld 临时打开防火墙 syste ...

  7. Service Worker初体验

    http://web.jobbole.com/84792/ http://imweb.io/topic/56592b8a823633e31839fc01

  8. ajax的跨域解决方案(java+ajax)

    简单的建立一个后台项目 新建servlet: 内容如下: package a; import java.io.IOException; import java.io.PrintWriter; impo ...

  9. spring 配置文件的头部 xmls

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  10. 02-第一个Java程序

    学习java的第一个程序 记录自己的学习 记录自己的坚持 记录自己的梦想 public class Hello{ public static void main(String[] args) { Sy ...