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实现的tab选项卡代码分享
Dec 09 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python中的self用法详解
2019/08/06 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python ellipsis 的用法详解
2020/11/20 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
python3实现无权最短路径的方法
2021/05/12 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL