CSS3实现伪类hover离开时平滑过渡效果示例


Posted in HTML / CSS onAugust 10, 2017

由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬。

大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,CSS3便可以帮你解决这些问题。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>离开时效果生硬</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            div:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

由于div元素只有在:hover伪类触发的时候,效果才能加到div元素上。

当鼠标离开div元素的时候,:hover伪类将不再生效,瞬间丢掉hover里写的动画效果。

此时,我们应当在原本元素上再写一个一模一样的transition效果,将离开断掉的动画效果续接上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单解决</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border:1px solid;

            margin:0px auto;
            margin-top: 200px;

            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }
        div:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

此时,不管鼠标在什么时候离开元素,都会原样返回。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 #HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 #HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 #HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 #HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
You might like
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python自动连接ssh的方法
2015/03/07 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
资深生产主管自我评价
2013/09/22 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
股份转让协议书
2014/04/12 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
老干部座谈会主持词
2015/07/03 职场文书