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 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
请离开include_once和require_once
2013/07/18 PHP
php分页代码学习示例分享
2014/02/20 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
python进程与线程小结实例分析
2018/11/11 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript特殊用法示例介绍
2013/11/29 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python实现dijkstra最短路由算法
2019/01/17 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
党员的自我评价范文
2014/01/02 职场文书
学年自我鉴定
2014/01/16 职场文书
出国留学担保书
2014/05/20 职场文书
音乐教师求职信范文
2015/03/20 职场文书
车间质检员岗位职责
2015/04/08 职场文书
网聊搭讪开场白
2015/05/28 职场文书
神秘岛读书笔记
2015/07/01 职场文书