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制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 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实现的美国50个州选择列表实例
2015/04/20 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
专科毕业生学习生活的自我评价
2013/10/26 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
国际会议邀请函范文
2014/01/16 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
2014年学前班工作总结
2014/12/08 职场文书
感恩的心主题班会
2015/08/12 职场文书
离婚协议书格式范本
2016/03/18 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
解决Go gorm踩过的坑
2021/04/30 Golang