transition برای linear-gradient
سلام دوستان.
میخواستم بدونم که چطور میشه به linear-gradient بکگراند transition داد ؟
@Raymond
@Nima.nori
@Arshiamohammadei
@Pouyab
@MortezaVaezi
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
1
CSS
#container div a {
display: inline-block;
margin-top: 10%;
padding: 1em 2em;
font-size: 2em;
color: #fff;
font-family: arial, sans-serif;
text-decoration: none;
border-radius: 0.3em;
position: relative;
background-color: #ccc;
background-image: linear-gradient(to top, #C0357E, #EE5840);
-webkit-backface-visibility: hidden;
z-index: 1;
}
#container div a:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background-image: linear-gradient(to top, #6d8aa0, #343436);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}
#container div a:hover:after {
opacity: 1;
}
#container div a span {
position: relative;
z-index: 3;
} HTML
<div id="container"><div><a href="#"><span>Press Me</span></a></div></div> 
1
گرادینت مثل عکسه transition اعمال نمیشه
ولی راه های زیادی داره مثلا با background-position میتونید موقعیت نمایشی گرادینت رو عوض کنید
و یا با ::after و ::before میتونید لایه اضافه کنید...