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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 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获取MAC地址的具体实例
2013/12/13 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
python实现八大排序算法(2)
2017/09/14 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python中pdb模块实例用法
2021/01/15 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
企业管理培训感言
2014/01/27 职场文书
美术教师自我鉴定
2014/02/12 职场文书
教师考核表个人总结
2015/02/12 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
四风之害观后感
2015/06/09 职场文书
致接力运动员加油稿
2015/07/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS