CSS3实现hover离开时平滑过渡的实例详解-css教程-PHP中文网

首页

web前端

css教程

CSS3实现hover离开时平滑过渡的实例详解

巴扎黑

May 28, 2018 pm 05:36 PM

css3 hover

本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下

由于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">
            p{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            p:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    </html>

登录后复制

由于p元素只有在:hover伪类触发的时候，效果才能加到p元素上。

当鼠标离开p元素的时候，: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">
        p{
            width: 100px;
            height: 100px;
            border:1px solid;

            margin:0px auto;
            margin-top: 200px;

            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }
        p:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

登录后复制

此时，不管鼠标在什么时候离开元素，都会原样返回。

以上是CSS3实现hover离开时平滑过渡的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1276

C# 教程

1256

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

CSS小技巧：利用transition保留hover状态 Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！

巧用CSS实现各种奇形怪状按钮（附代码） Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

体验即飞携手哈浮X1相机的飞行之旅 Jan 15, 2024 pm 02:21 PM

我们经常能够在网上看到很多精彩的俯视视角的视频，无人机拍出来的画面确实相当震撼，但其实很多人对无人机的认知很有限，例如有些地方限飞为什么还能飞？其实即开即飞的“无人机”才是当前的主流，更值得大多数人选择，今天就给大家带来哈浮飞行相机X1的上手体验。外观方面，哈浮飞行相机X1，首创折叠设计，整机仅125g，比手机轻，折叠后可以轻松手握，放进包包毫无压力。四个软性染叶和安全边框设计，完美保护拍摄安全。染叶创新采用Biobased生物基材，高弹耐用，安全环保;更有全保护边框加持，起飞降落都能贴心保护手

怎么移除css的hover事件 Feb 01, 2023 am 10:06 AM

移除css hover事件的方法：1、；通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件；2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。