انیمیشن برای خارج شدن از hover در css

سوال

سلام دوستان.

هنگام طراحی سایت با یه مشکل مواجه شدم اگر کسی کد اون رو میدونه بگه.

من میخوام وقتی کسی روی یک div موس رو ببره یا همون hover، انیمیشن اجرا بشه؛ این رو خودم میدونم اما میخوام وقتی که کاربر موس رو از روی div برداشت یه انیمشن دیگه اجرا بشه.

برای مثال وقتی کسی موس رو روی یه نگ a میبره opacity اون به ۰.۵ کاهش پیدا کنه و وقتی که موس رو میبره کنار opacity دوباره یه ۱ برگرده (همراه با انیمیشن).
تشکر از همه.

 

حل شد 0
۱۳۹۷/۸/۱۵ ۱۵:۵۷:۳۱ 2 پاسخ کاربر تازه 0

پاسخ ها ( 2 )

  1. SOLTANE GHALBHA
    0
    ۱۳۹۷/۸/۱۵ ۱۸:۱۱:۵۴
    پاسخ

    سلام

    هم با css میتونید انجام بدید، هم با javascript؛ که من هر دو نمونه رو براتون قرار میدم:

    • با CSS

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰
    ۴۱
    ۴۲
    ۴۳
    ۴۴
    ۴۵
    ۴۶
    ۴۷
    ۴۸
    ۴۹
    ۵۰
    ۵۱
    ۵۲
    ۵۳
    ۵۴
    ۵۵
    ۵۶
    ۵۷
    ۵۸
    ۵۹
    ۶۰
    ۶۱
    ۶۲
    ۶۳
    ۶۴
    ۶۵
    ۶۶
    ۶۷
    ۶۸
    ۶۹
    ۷۰
    ۷۱
    ۷۲
    ۷۳
    ۷۴
    ۷۵
    ۷۶
    ۷۷
    ۷۸
    ۷۹
    ۸۰
    ۸۱
    ۸۲
    ۸۳
    ۸۴
    ۸۵
    ۸۶
    ۸۷
    ۸۸
    ۸۹
    ۹۰
    ۹۱
    ۹۲
    ۹۳
    ۹۴
    ۹۵
    ۹۶
    ۹۷
    ۹۸
    ۹۹
    ۱۰۰
    ۱۰۱
    ۱۰۲
    ۱۰۳
    ۱۰۴
    ۱۰۵
    ۱۰۶
    ۱۰۷
    ۱۰۸
    ۱۰۹
    ۱۱۰
    ۱۱۱
    ۱۱۲
    ۱۱۳
    ۱۱۴
    ۱۱۵
    ۱۱۶
    ۱۱۷
    ۱۱۸
    ۱۱۹
    ۱۲۰
    ۱۲۱
    ۱۲۲
    ۱۲۳
    ۱۲۴
    ۱۲۵
    ۱۲۶
    ۱۲۷
    ۱۲۸
    ۱۲۹
    ۱۳۰
    <!DOCTYPE html>
    <html>
     
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <style>
      #button {
    margin: ۶۰px auto;
    display: block;
    position: relative;
           text-align: center;
    width: ۱۵۰px;
    padding: ۷۰px ۱۰px;
    color: white;
    font-weight: ۳۰۰;
    font-size: ۲۴px;
    text-shadow: ۱px ۱px ۱px hsla(۰,۱۰۰%,۰%,۰.۵);
    text-decoration: none;
    border: ۵px solid #aefbae;
    background-image: -moz-linear-gradient(top, #۵be93a, #۲۷۸۳۱۲);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(۰, #۵be93a),color-stop(۱, #۲۷۸۳۱۲));
    -moz-border-radius: ۲۵px;
    -webkit-border-radius: ۲۵px;
    border-radius: ۲۵px;
    -moz-background-clip: padding;
                -webkit-background-clip: padding;
                background-clip: padding-box;
    -webkit-transform: rotate(۷۲۰deg) rotateY(۰);
    -webkit-transition: all ۰.۵s;
    -webkit-transition-timing-function: cubic-bezier(۱, ۰.۸, ۰.۵, ۱);
    -webkit-transition-delay: ۰.۵s;
    -moz-transform: rotate(۷۲۰deg);
    -moz-transition: all ۰.۵s;
    -moz-transition-timing-function: cubic-bezier(۱, ۰.۸, ۰.۵, ۱);
    -moz-transition-delay: ۰.۵s;
    -o-transform: rotate(۷۲۰deg);
    -o-transition: all ۰.۵s;
    -o-transition-timing-function: cubic-bezier(۱, ۰.۸, ۰.۵, ۱);
    -o-transition-delay: ۰.۵s;
    z-index: ۱;
    -webkit-box-shadow: inset ۰ ۰ ۲۰px rgba(۰,۰,۰,۰.۵);
    }
    #button:hover {
    -webkit-transition: padding ۰.۲s, top ۰.۲s;
    -webkit-transform: rotate(0deg) rotateY(۰);
    -webkit-transition-delay: ۰;
    -moz-transition: padding ۰.۲s, top ۰.۲s;
    -moz-transform: rotate(0deg);
    -moz-transition-delay: ۰;
    -o-transition: padding ۰.۲s, top ۰.۲s;
    -o-transform: rotate(0deg);
    -o-transition-delay: ۰;
    padding: ۸۰px ۲۰px;
    top: -۱۰px;
    background-image: -moz-linear-gradient(top, #۵be93a, #۵be93a, #۲۷۸۳۱۲);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(۰, #۵be93a),color-stop(۰.۲, #۵be93a),color-stop(۱, #۲۷۸۳۱۲));
    }
    #button:after {
    content: "";
    position: absolute;
    top: ۰;
    left: ۰;
    bottom: ۰;
    right: ۰;
    z-index: -۱;
    }
    #button:before {
    content: "";
    position: absolute;
    top: -۳۰px;
    left: -۳۰px;
    bottom: -۳۰px;
    right: -۳۰px;
    -moz-border-radius: ۳۵px;
    -webkit-border-radius: ۳۵px;
    border-radius: ۳۵px;
    z-index: -۲;
    -webkit-transition: all ۰.۲s;
    -webkit-transform: rotate(0deg) rotateY(۰);
    -webkit-transition-delay: ۰;
    -moz-transition: all ۰.۲s;
    -moz-transform: rotate(0deg) rotateY(۰);
    -moz-transition-delay: ۰;
    -o-transition: all ۰.۲s;
    -o-transform: rotate(0deg) rotateY(۰);
    -o-transition-delay: ۰;
    -webkit-box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۱);
    -moz-box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۱);
    box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۱);
    }
    #button:hover:before {
    -webkit-box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۲);
    -moz-box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۲);
    box-shadow: inset ۰ ۰ ۱۰۰px rgba(۰,۰,۰,۰.۲);
    top: -۲۰px;
    left: -۲۰px;
    bottom: -۲۰px;
    right: -۲۰px;
    }
    #button:active {
    -webkit-box-shadow: inset ۰ ۰ ۳۰px rgba(۰,۰,۰,۰.۸);
    -moz-box-shadow: inset ۰ ۰ ۳۰px rgba(۰,۰,۰,۰.۸);
    box-shadow: inset ۰ ۰ ۳۰px rgba(۰,۰,۰,۰.۸);
    }
      </style>
    </head>
     
    <body>
      <a id="button" href="#">
    Beporsam.ir
    </a>
    </body>
     
    </html>



    • با Js

    کد زیر، نیازمند کتابخانه jquery میباشد

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    $(document).ready(function(){
        $("p").mouseover(function(){
            $("p").css("background-color", "red");
        });
        $("p").mouseout(function(){
            $("p").css("background-color", "blue");
        });
    });
    </script>
    </head>
    <body>
     
    <p>beporsam.ir</p>



    موفق باشید.

    بهترین پاسخ
  2. مهدی
    1
    ۱۳۹۷/۸/۱۵ ۱۸:۴۶:۳۶
    پاسخ

    سلام.

    دستتون درد نکنه عالی بود. ظاهرا که با jquery بهتره. متشکرم.

ارسال یک پاسخ