shaosiming

通过CSS3控制鼠标滑过图片缩放效果

大家都知道,一般需要用到特效的时候,大部分都是用JS来操作,可是从CSS3流行以后,有了很多特效可以通过CSS来实现。相对于JS来说,CSS要方便很多。...

关键词: CSS CSS3 图片缩放
时间:2019-09-03
查看:
评论:0 条 / 我也去评论
大家都知道,一般需要用到特效的时候,大部分都是用JS来操作,可是从CSS3流行以后,有了很多特效可以通过CSS来实现。相对于JS来说,CSS要方便很多。

所以,今天我来给大家分享一个CSS3鼠标滑过图片缩放的效果,我默认设置的是1.1倍,也就是滑过的时候,会比原来的图片大上一圈,至于1.1倍大家可以自定义设置。

演示效果:鼠标放在图片上面会自动放大1.1倍

 代码片段:温馨提示,一键复制代码必须开启Flash插件

img:hover{
   -webkit-transform:scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1); 
   transform:scale(1.1);
}

代码说明:

-ms-transform: scale(1.1);            //-ms代表ie内核识别码
-moz-transform: scale(1.1);             //-moz代表火狐内核识别码
-webkit-transform: scale(1.1);         //-webkit代表谷歌内核识别码
-o-transform: scale(1.1);             //-o代表欧朋【opera】内核识别码
transform: scale(1.1);               //统一标识语句
scale(1.1);   的1.1代表缩放倍数,可自由更改!
顶一下  
(5)
  100%
踩一下  
(0)
  0%
  • 本文标题:通过CSS3控制鼠标滑过图片缩放效果
  • 本文链接:https://www.shaosiming.net/html/news/20.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!

    CSS初始公共样式和清除默认样式的写法

    大家都知道,在浏览器中通常都会含有默认的样式,User Agent Stylesheet。意识就是说当某个class元素我们没有写入css样式的时候...

    css   样式   默认   
    2019-09-20
    56
    0

    css中怎么写自适应,跟随分辨率改变宽度

    如今随着移动端的崛起,越来越多的网站开发了手机APP客户端,但是作为个人站长,开发APP着实有点难弄~ 所以,自适应就解...

    css   css3   自适应   
    2019-09-16
    182
    0

    CSS3鼠标焦点滑过过渡延迟展示效果的代码

    在鼠标经过或者停留的时候,由一种状态展示位另一种状态。在css3之前,hover属性是没有任何过渡或者特效动画的。...

    CSS   CSS3   焦点   hover   
    2019-09-12
    111
    0

    关于CSS横着写还是竖着写?区别是什么?

    今天突发奇想,想到一个问题,就是关于CSS的写法,有人喜欢横着写,有人喜欢换行竖着写,到底有什么区别呢? 于是乎,...

    CSS   CSS3   CSS写法   
    2019-09-02
    78
    1