1、透明度漸變背景交互

<div?class="fade-background"></div>

Copy
.fade-background?{
??width:?200px;
??height:?200px;
??background:?linear-gradient(to?bottom,?rgba(255,?0,?0,?0),?rgba(255,?0,?0,?1));
??transition:?background?0.5s?ease;
}

.fade-background:hover?{
??background:?linear-gradient(to?bottom,?rgba(255,?0,?0,?1),?rgba(255,?0,?0,?0));
}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，當(dāng)鼠標(biāo)懸停時，背景從完全透明到純紅色漸變，再從純紅色漸變到完全透明。

2、漸變背景文字交互

<h1?class="gradient-text">Hello,?World!</h1>

.gradient-text?{
??background:?linear-gradient(to?right,?red,?blue);
??-webkit-background-clip:?text;
??-webkit-text-fill-color:?transparent;
??transition:?background?0.5s?ease;
}

.gradient-text:hover?{
??background:?linear-gradient(to?right,?blue,?red);
}

說明：這個案例創(chuàng)建了一個標(biāo)題，當(dāng)鼠標(biāo)懸停時，文字顏色從紅色漸變到藍(lán)色，并且背景漸變也相應(yīng)改變。

3、鼠標(biāo)跟隨漸變交互

<div?class="follow-gradient"></div>

.follow-gradient?{
??width:?200px;
??height:?200px;
??background:?linear-gradient(to?right,?red,?blue);
??position:?relative;
}

.follow-gradient:before?{
??content:?"";
??width:?20px;
??height:?20px;
??background:?white;
??border-radius:?50%;
??position:?absolute;
??top:?50%;
??left:?50%;
??transform:?translate(-50%,?-50%);
??transition:?background?0.5s?ease;
}

.follow-gradient:hover:before?{
??background:?linear-gradient(to?right,?blue,?red);
}

說明：這個案例創(chuàng)建了一個正方形區(qū)域，在其中心有一個小白點。當(dāng)鼠標(biāo)懸停時，小白點的顏色從白色漸變到藍(lán)色和紅色。

4、漸變按鈕交互

<button?class="gradient-button">Click?Me</button>

.gradient-button?{
??background:?linear-gradient(to?right,?red,?blue);
??border:?none;
??color:?white;
??padding:?10px?20px;
??position:?relative;
??overflow:?hidden;
??transition:?transform?0.5s?ease;
}

.gradient-button:after?{
??content:?"";
??background:?rgba(255,?255,?255,?0.5);
??position:?absolute;
??top:?0;
??left:?-100%;
??width:?100%;
??height:?100%;
??transform:?skewX(45deg);
??transition:?transform?0.5s?ease;
}

.gradient-button:hover?{
??transform:?scale(1.2);
}

.gradient-button:hover:after?{
??left:?100%;
}

說明：這個案例創(chuàng)建了一個漸變按鈕，當(dāng)鼠標(biāo)懸停時，按鈕會放大并展示一個斜切的漸變背景。

5、漸變邊框動畫交互

<div?class="border-animation"></div>

@keyframes?border-animation?{
??0%?{
????border-color:?red;
??}
??50%?{
????border-color:?blue;
??}
??100%?{
????border-color:?red;
??}
}

.border-animation?{
??width:?200px;
??height:?200px;
??border:?2px?solid?red;
??animation:?border-animation?3s?infinite;
??}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，邊框顏色會在紅色和藍(lán)色之間循環(huán)變化，形成一個動畫效果。

6、文字漸變動畫交互

<h1?class="text-animation">Hello,?World!</h1>

@keyframes?text-animation?{
??0%?{
????color:?red;
??}
??50%?{
????color:?blue;
??}
??100%?{
????color:?red;
??}
}

.text-animation?{
??animation:?text-animation?3s?infinite;
}

說明：這個案例創(chuàng)建了一個標(biāo)題，文字顏色會在紅色和藍(lán)色之間循環(huán)變化，形成一個動畫效果。

7、漸變陰影交互

<div?class="gradient-shadow"></div>

.gradient-shadow?{
??width:?200px;
??height:?200px;
??background:?red;
??box-shadow:?0?0?10px?rgba(0,?0,?0,?0.5);
??transition:?box-shadow?0.5s?ease;
}

.gradient-shadow:hover?{
??box-shadow:?0?0?10px?rgba(0,?0,?0,?0.2),?0?0?20px?rgba(0,?0,?0,?0.3),?0?0?30px?rgba(0,?0,?0,?0.4);
}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，當(dāng)鼠標(biāo)懸停時，陰影效果從淺到深漸變，形成一個立體感。

8、漸變背景縮放交互

<div?class="scale-background"></div>

.scale-background?{
??width:?200px;
??height:?200px;
??background:?linear-gradient(to?right,?red,?blue);
??transition:?background-size?0.5s?ease;
}

.scale-background:hover?{
??background-size:?200%?200%;
}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，當(dāng)鼠標(biāo)懸停時，背景漸變會放大到原來的兩倍大小。

9、漸變背景旋轉(zhuǎn)交互

<div?class="rotate-background"></div>

.rotate-background?{
??width:?200px;
??height:?200px;
??background:?linear-gradient(to?right,?red,?blue);
??transition:?transform?0.5s?ease;
}

.rotate-background:hover?{
??transform:?rotate(180deg);
}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，當(dāng)鼠標(biāo)懸停時，背景漸變會順時針旋轉(zhuǎn)180度。

10、漸變背景模糊交互

<div?class="blur-background"></div>

.blur-background?{
??width:?200px;
??height:?200px;
??background:?linear-gradient(to?right,?red,?blue);
??transition:?filter?0.5s?ease;
}

.blur-background:hover?{
??filter:?blur(5px);
}

說明：這個案例創(chuàng)建了一個矩形區(qū)域，當(dāng)鼠標(biāo)懸停時，背景漸變會模糊化，形成一個柔和的效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-661571.html