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实现阅读进度条
Feb 27 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 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
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python找出完数的方法
2018/11/12 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
小区门卫工作职责
2013/12/14 职场文书
二年级语文教学反思
2014/02/02 职场文书
企业管理标语
2014/06/10 职场文书
争先创优公开承诺书
2014/08/30 职场文书
同学会邀请函模板
2015/01/30 职场文书
关于幸福的感言
2015/08/03 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
Go 中的空白标识符下划线
2022/03/25 Golang