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实现滚动的齿轮动画效果
Jun 05 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Js+XML 操作
2006/09/20 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python字符转换
2008/09/06 Python
python学习手册中的python多态示例代码
2014/01/21 Python
python中PIL安装简单教程
2016/04/21 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
总账会计岗位职责
2015/04/02 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript