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">
            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>

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

但此时会有一个问题,鼠标放上去,立马离开,或者鼠标从上边匀速划过,div回到原样的时间,依旧是1s。

其实,我们在hover里写的transition:all 1s linear完全是多余的。

transition有一个特性,只要是带有数值类型的属性(例如:% , rgba() , rgb() , hsla() , 数字等),在其发生变化的时候,均会被触发动画效果。

因此,不管:hover伪类什么时候丢掉我的动画,也不管我:hover时,元素动画走到了什么地步。只要元素本身带有transitioin,该动画便会从当前动画执行到的地方,以相同的时间返回原样。


<!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);
                 /* 去掉这个tansition */
                /* transition:  all 1s linear; */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

这只是最简单的动画实现,但对于目前大部分需求来说,配合配合贝塞尔曲线,已经足够用了。

你仅仅需要做到,hover中的最终样式,保证为数值样式变OK了。

像display:block变为display:none就不好使了,此时我们可以用visibilty:1变为visibilty:0,同样也可以简单实现显示到隐藏的效果。

另外加一句,不太清楚transition属性的可以自行去百度去,transition-timing-function属性定义的速度曲线,使用cubic-bezier贝塞尔曲线,可以做到很多效果,大家可以上这个网址去试一试贝塞尔曲线实现的动画

  • 4
    点赞
  • 3
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

@font-face{ font-family:"Raphaelicons"; src:url(&#39;fonts/raphaelicons-webfont.eot&#39;); src:url(&#39;fonts/raphaelicons-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), url(&#39;fonts/raphaelicons-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;fonts/raphaelicons-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;fonts/raphaelicons-webfont.svg&#39;) format(&#39;svg&#39;); font-weight: normal; font-style: normal; } html,body,.container,.st-container{ height: 100%; } body{ font-family:Arial,Georgia,serif; background-color: #ddd; font-weight: bold; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing:antialiased; } a{ text-decoration: none; color: #555; } .clr{ width: 0; height: 0; overflow: hidden; clear: both; padding:0; margin:0; } .st-container{ width: 100%; height: 100%; position: absolute;; top:0; left:0; font-family: Arial,"Josefin Slab","Myriad Pro",sans-serif; } .st-container > input,.st-container > a{ width: 20%; height: 40px; line-height: 40px; position:fixed; bottom:0; cursor: pointer; } .st-container > input{ opacity:0; z-index: 1000; } .st-container > a{ z-index: 10; font-weight: 700; font-size: 16px; background-color: #e23a6e; color: #fff; text-align: center; text-shadow:1px 1px 1px rgba(151,24,64,0.2); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; } #st-control-1,#st-control-1 + a{ left:0%; } #st-control-2,#st-control-2 + a{ left:20%; } #st-control-3,#st-control-3 + a{ left:40%; } #st-control-4,#st-control-4 + a{ left:60%; } #st-control-5,#st-control-5 + a{ left:80%; } .st-container input:checked + a,.st-container input:checked:hover + a{ background-color: #821134; } .st-container input:checked + a:after{ content: &#39;&#39;; width: 0; height: 0; overflow: hidden; border:20px solid transparent; border-bottom-color:#821134; position: absolute; bottom:100%; left:50%; /*transform:translateX(-50%);*/ margin-left: -20px; } .st-container input:hover + a{ background-color: #ad244f; } /*内容区域*/ .st-scroll, .st-scroll .st-panel{ height: 100%; width: 100%; position: relative; } .st-scroll{ left:0; top:0; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; transition:all 0.6s ease-in-out; } .st-panel{ background-color: #fff; overflow: hidden; } .st-color{ background-color: #fa96b5; color: #fff; } #st-control-1:checked ~ .st-scroll{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%); } #st-control-2:checked ~ .st-scroll{ -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%); } #st-control-3:checked ~ .st-scroll{ -webkit-transform:translateY(-200%); -moz-transform:translateY(-200%); transform:translateY(-200%); } #st-control-4:checked ~ .st-scroll{ -webkit-transform:translateY(-300%); -moz-transform:translateY(-300%); transform:translateY(-300%); } #st-control-5:checked ~ .st-scroll{ -webkit-transform:translateY(-400%); -moz-transform:translateY(-400%); transform:translateY(-400%); } .st-desc{ width: 200px; height: 200px; background-color: #fa96b5; position: absolute; left:50%; top:0; margin-left: -100px; -webkit-transform:translateY(-50%) rotate(45deg); -moz-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg); } .st-color .st-desc{ background-color: #fff; } [data-icon]:after{ content: attr(data-icon); width: 200px; height: 200px; color: #fff; font-size: 90px; text-align: center; line-height: 200px; position: absolute; left: 50%; top:50%; margin: -100px 0 0 -100px; -webkit-transform:rotate(-45deg) translateY(25%); -moz-transform:rotate(-45deg) translateY(25%); transform:rotate(-45deg) translateY(25%); font-family:"Raphaelicons"; text-shadow:1px 1px 1px rgba(151,24,64,0.2); } .st-color [data-icon]:after{ color: #fa96b5; text-shadow:1px 1px 1px rgba(0,0,0,0.1); } .st-panel h2{ color: #e23a6e; font-size: 54px; line-height: 50px; text-align: center; font-weight: 900; width: 80%; position: absolute; left:10%; top:150px; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility:hidden; } .st-color h2{ color: #fff; text-shadow:1px 1px 1px rgba(0,0,0,0.1); } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards; -o-animation:moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards; animation:moveDown 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveDown{ 0%{ -webkit-transform:translateY(-40px); opacity:0; } 100%{ -webkit-transform:translateY(0px); opacity:1; } } @-moz-keyframes moveDown{ 0%{ -moz-transform:translateY(-40px); opacity:0; } 100%{ -moz-transform:translateY(0px); opacity:1; } } @-o-keyframes moveDown{ 0%{ -o-transform:translateY(-40px); opacity:0; } 100%{ -o-transform:translateY(0px); opacity:1; } } @-ms-keyframes moveDown{ 0%{ -ms-transform:translateY(-40px); opacity:0; } 100%{ -ms-transform:translateY(0px); opacity:1; } } @keyframes moveDown{ 0%{ transform:translateY(-40px); opacity:0; } 100%{ transform:translateY(0px); opacity:1; } } .st-panel p{ font-size: 25px; color: #8b8b8b; line-height: 1.8; text-align: left; text-indent: 2em; font-weight: 700; width: 70%; position: absolute; left:15%; top:280px; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility:hidden; } .st-color p{ color:rgba(255,255,255,0.8); text-shadow:1px 1px 1px rgba(0,0,0,0.1); } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p{ -webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards; -o-animation:moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards; animation:moveUp 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveUp{ 0%{ -webkit-transform:translateY(40px); opacity:0; } 100%{ -webkit-transform:translateY(0px); opacity:1; } } @-moz-keyframes moveUp{ 0%{ -moz-transform:translateY(40px); opacity:0; } 100%{ -moz-transform:translateY(0px); opacity:1; } } @-o-keyframes moveUp{ 0%{ -o-transform:translateY(40px); opacity:0; } 100%{ -o-transform:translateY(0px); opacity:1; } } @-ms-keyframes moveUp{ 0%{ -ms-transform:translateY(40px); opacity:0; } 100%{ -ms-transform:translateY(0px); opacity:1; } } @keyframes moveUp{ 0%{ transform:translateY(40px); opacity:0; } 100%{ transform:translateY(0px); opacity:1; } } @media screen and (max-width:520px){ .st-panel h2{ font-size: 42px; } .st-panel p{ font-size: 18px; width: 90%; left:5%; top:240px; } .st-container > a{ font-size: 13px; } .st-desc{ width: 160px; height:160px; margin-left: -80px; } [data-icon]:after{ font-size: 75px; -webkit-transform:rotate(-45deg) translateY(20%); -moz-transform:rotate(-45deg) translateY(20%); transform:rotate(-45deg) translateY(20%); } } @media screen and (max-width:360px){ .st-panel h2{ font-size: 42px; } .st-panel p{ font-size: 18px; width: 90%; left:5%; top:240px; } .st-container > a{ font-size: 10px; } .st-desc{ width: 120px; height:120px; margin-left: -60px; } [data-icon]:after{ font-size: 60px; -webkit-transform:rotate(-45deg) translateY(15%); -moz-transform:rotate(-45deg) translateY(15%); transform:rotate(-45deg) translateY(15%); } }
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值