shaosiming

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

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

关键词: CSS CSS3 焦点 hover
时间:2019-09-12
查看:
评论:0 条 / 我也去评论
在css中,hover代表靠近,浮动的意识。就是在鼠标放在某个位置,或者滑过的时候,做出相对应的动作。如果移开了,就恢复原状。

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

比如下面的演示,鼠标经过我图片放大1.1倍,缩放代码说明 没有过渡动画的效果演示。展示的吧比较直接,就是大了一圈而已。


而下面是有过渡动画的演示,很明显要缓慢一点,我设置的是0.5S。再来看一下效果


是不是看着就舒服很多了呢?这是比例较小,如果是10px 到100px 放大10倍,加上过渡延迟效果,那效果肯定棒棒哒~

代码部分:

transition: 0.5s all;    /* 总属性标识 */
-webkit-transition: 0.5s all;  /* 谷歌浏览器内核兼容 */
-moz-transition: 0.5s all; /* 火狐浏览器内核兼容 */
-ms-transition: 0.5s all; /* IE内核的兼容 */
-o-transition: 0.5s all  /* opera内核的兼容 */

需要注意的是,不管是经过还是原来的css属性上,都要加上这段代码,不然你滑过的时候有特效,滑走回去的时候是没有过渡特效的!

顶一下  
(3)
  100%
踩一下  
(0)
  0%
  • 本文标题:CSS3鼠标焦点滑过过渡延迟展示效果的代码
  • 本文链接:https://www.shaosiming.net/html/news/34.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控制鼠标滑过图片缩放效果

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

    CSS3   CSS   图片缩放   
    2019-09-03
    162
    0

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

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

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