انیمیشن برای خارج شدن از hover در css
سوال
سلام دوستان.
هنگام طراحی سایت با یه مشکل مواجه شدم اگر کسی کد اون رو میدونه بگه.
من میخوام وقتی کسی روی یک div موس رو ببره یا همون hover، انیمیشن اجرا بشه؛ این رو خودم میدونم اما میخوام وقتی که کاربر موس رو از روی div برداشت یه انیمشن دیگه اجرا بشه.
برای مثال وقتی کسی موس رو روی یه نگ a میبره opacity اون به 0.5 کاهش پیدا کنه و وقتی که موس رو میبره کنار opacity دوباره یه 1 برگرده (همراه با انیمیشن).
تشکر از همه.
حل شد
0
طراحی سایت 8 سال
2018-11-06T15:57:31+03:30
2018-11-06T15:57:31+03:30 2 پاسخ
کاربر تازه 0
پاسخ ها ( 2 )
سلام
هم با css میتونید انجام بدید، هم با javascript؛ که من هر دو نمونه رو براتون قرار میدم:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <style> #button { margin: 60px auto; display: block; position: relative; text-align: center; width: 150px; padding: 70px 10px; color: white; font-weight: 300; font-size: 24px; text-shadow: 1px 1px 1px hsla(0,100%,0%,0.5); text-decoration: none; border: 5px solid #aefbae; background-image: -moz-linear-gradient(top, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312)); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -webkit-transform: rotate(720deg) rotateY(0); -webkit-transition: all 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -webkit-transition-delay: 0.5s; -moz-transform: rotate(720deg); -moz-transition: all 0.5s; -moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -moz-transition-delay: 0.5s; -o-transform: rotate(720deg); -o-transition: all 0.5s; -o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1); -o-transition-delay: 0.5s; z-index: 1; -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } #button:hover { -webkit-transition: padding 0.2s, top 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: padding 0.2s, top 0.2s; -moz-transform: rotate(0deg); -moz-transition-delay: 0; -o-transition: padding 0.2s, top 0.2s; -o-transform: rotate(0deg); -o-transition-delay: 0; padding: 80px 20px; top: -10px; background-image: -moz-linear-gradient(top, #5be93a, #5be93a, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312)); } #button:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; } #button:before { content: ""; position: absolute; top: -30px; left: -30px; bottom: -30px; right: -30px; -moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; z-index: -2; -webkit-transition: all 0.2s; -webkit-transform: rotate(0deg) rotateY(0); -webkit-transition-delay: 0; -moz-transition: all 0.2s; -moz-transform: rotate(0deg) rotateY(0); -moz-transition-delay: 0; -o-transition: all 0.2s; -o-transform: rotate(0deg) rotateY(0); -o-transition-delay: 0; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.1); box-shadow: inset 0 0 100px rgba(0,0,0,0.1); } #button:hover:before { -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.2); box-shadow: inset 0 0 100px rgba(0,0,0,0.2); top: -20px; left: -20px; bottom: -20px; right: -20px; } #button:active { -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.8); box-shadow: inset 0 0 30px rgba(0,0,0,0.8); } </style> </head> <body> <a id="button" href="#"> Beporsam.ir </a> </body> </html>کد زیر، نیازمند کتابخانه 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>موفق باشید.
سلام.
دستتون درد نکنه عالی بود. ظاهرا که با jquery بهتره. متشکرم.