整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<style>
a {
text-decoration: none;
color: #8c7ae6;
font-size: 24px;
box-shadow: inset 0 0 0 #8c7ae6;
transition: all 300ms ease-in-out;
}
a:hover {
box-shadow: inset 180px 0 0 0 #8c7ae6;
color: white;
}
</style>
<a href="#">Hover this link</a><style>
a {
overflow: hidden;
position: relative;
display: inline-block;
}
a::before,
a::after {
content: "";
position: absolute;
width: 100%;
left: 0;
}
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
a::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform 0.3s ease-in-out;
color: #54b3d6;
}
a:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
a:hover::after {
transform: translate3d(0, 0, 0);
}
a span {
display: inline-block;
transition: transform 0.3s ease-in-out;
}
a:hover span {
transform: translate3d(-200%, 0, 0);
}
body {
display: grid;
font-size: 27px;
height: 100vh;
place-items: center;
}
a {
text-decoration: none;
color: #18272f;
font-weight: 700;
vertical-align: top;
}
</style>
<p>Hover <a href="#" id="style-2" data-replace="this link">
<span>this link</span>
</a></p><style>
a {
text-decoration: none;
color: #18272f;
font-weight: 700;
position: relative;
}
a::before {
content: "";
background-color: #00a8ff;
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all 300ms ease-in-out;
}
a:hover::before {
bottom: 0;
height: 100%;
}
body {
display: grid;
font-size: 27px;
line-height: 1.5;
height: 100vh;
place-items: center;
}
</style>
<p>Hover this <a href="#">cool</a> link.</p><style>
a {
background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
display: inline-block;
padding: 5px 0;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 300ms ease-in-out;
}
a:before {
content: "";
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
transition: all 300ms ease-in-out;
}
a:hover {
background-position: 0;
}
a:hover::before {
width: 100%;
}
body {
display: grid;
font-size: 27px;
height: 100vh;
place-items: center;
}
</style>
<a href="">Hover This Link</a><style>
a {
color: black;
text-decoration: none;
background: linear-gradient(to right, #64c8c8, #64c8c8),
linear-gradient(to right, #ff0000, #ff00b4, #0064c8);
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}
a:hover {
background-size: 0 3px, 100% 3px;
}
body {
display: grid;
font-size: 27px;
font-weight: 700;
height: 100vh;
place-items: center;
}
</style>
<a href="">Hover This Link</a>原文地址：https://css-tricks.com/css-link-hover-effects/
圖1
圖2
圖3
歡看電影的朋友肯定會(huì)注意到一個(gè)有趣的細(xì)節(jié)，就是電影出品方一定會(huì)在片頭的Logo環(huán)節(jié)做一個(gè)小特效：暗影流動(dòng)之間光澤一閃而過，這樣做不僅可以提高Logo的辨識(shí)度，還可以提升質(zhì)感，一舉兩得。參照華納兄弟影業(yè)(Warner Bros. Pictures)的例子：
那么，在前端領(lǐng)域，如果使用純CSS技術(shù)，能不能實(shí)現(xiàn)類似的特效呢？答案當(dāng)然是可以的，這次我們以本站的Logo為例子，以一持萬、提綱挈領(lǐng)地講解一下如何使用純CSS技術(shù)實(shí)現(xiàn)圖片Logo鼠標(biāo)懸停光澤一閃而過的光影特效。
一般情況下，大多數(shù)前端開發(fā)會(huì)選擇 linear-gradient() ，這個(gè)方法創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于<gradient>數(shù)據(jù)類型，是一種特別的<image>數(shù)據(jù)類型。
簡單用法：
/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);那么它怎么和logo圖片結(jié)合使用呢？首先創(chuàng)建一個(gè)對(duì)象，因?yàn)槭莑ogo，所以我使用a標(biāo)簽，也就是超級(jí)鏈接，隨后聲明偽類mylogo：
<a href="/" class="mylogo" title="劉悅的技術(shù)博客"></a>之后，定義logo的樣式：
.mylogo{
display:block;
margin: 0 auto;
width:255px;
height:200px;
background-image:/logo.png;
background-repeat: no-repeat;
}接著就是linear-gradient()出場，原理并不復(fù)雜，利用linear-gradient繪制一個(gè)白色半透明漸變層，利用背景的負(fù)坐標(biāo)隱藏起來，同時(shí)配合transition屬性，在鼠標(biāo)懸停(hover)的時(shí)候，設(shè)置1秒鐘的延時(shí)動(dòng)畫，逐漸將光斑的坐標(biāo)進(jìn)行位移，產(chǎn)生一種光澤掠過的效果：
.mylogo{
width: 255px;
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
transition: 1s ease;
}
.mylogo:hover {
background-position: 200px 0, 0 0;
}這里需要注意的是，默認(rèn)負(fù)坐標(biāo)一定要超過logo本體的寬度，否則位移就不夠充分，效果是下面這樣的:
看起來還不錯(cuò)，這里transition的屬性設(shè)置在logo本體的偽類上面，此時(shí)如果logo本體失去鼠標(biāo)的焦點(diǎn)，光斑位置又會(huì)回到原來的負(fù)坐標(biāo)，此時(shí)光影又會(huì)在回閃一次，也就是一次懸停發(fā)生兩次位移，閃爍兩次，如果只想閃一次，可以將transition加載hover偽類中，這樣離開后不會(huì)二次位移，因?yàn)閯?dòng)畫效果只會(huì)出現(xiàn)在鼠標(biāo)懸停上，鼠標(biāo)離開后，就沒有動(dòng)畫回閃了：
.mylogo{
width: 255px;
height: 200px;
/*直接使用background縮放版本*/
/*每個(gè)漸變點(diǎn)的位置不能太小，不然會(huì)出現(xiàn)殘缺光斑*/
/*no-repeat -270px 0：將光斑定位隱藏起來*/
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
/* transition: 1s ease; */
}
.mylogo:hover{
/*鼠標(biāo)滑過實(shí)現(xiàn)光斑滑動(dòng)，但是在多背景情況下，需要多個(gè)background-position屬性值，否則會(huì)影響其他背景*/
background-position: 200px 0, 0 0;
transition: 1s ease;
}效果是這樣的：
但是這就結(jié)束了嗎？還沒有，因?yàn)檫@看起來似乎。。。有點(diǎn)一律千篇？
如果所有人都用linear-gradient，就難免有點(diǎn)無趣了，那么有沒有別的不落窠臼的玩兒法呢？
既然曉得了原理，無非就是位移產(chǎn)生的小把戲，那么我們完全脫離linear-gradient，使用一張帶光澤質(zhì)感的背景圖片shine.png：
由于使用了背景圖，所以我們需要對(duì)代碼進(jìn)行修改，為實(shí)體的背景圖添加一個(gè)容器，span標(biāo)簽：
<a href="/" class="mylogo" title="劉悅的技術(shù)博客"><span></span></a>樣式和linear-gradient差不多，也是利用負(fù)坐標(biāo)將span標(biāo)簽內(nèi)的背景圖隱藏起來：
.mylogo span {
display: block;
background: url("/shine.png") -360px -380px no-repeat;
transition-property: all;
transition-duration: .7s;
height: 200px;
width: 255px;
}接下來要比linear-gradient要簡單地多，直接設(shè)置懸停屬性，讓背景圖片發(fā)生位移：
.mylogo:hover span {
background-position: 100px 300px;
}效果是這樣的：
如果仔細(xì)觀察，會(huì)發(fā)現(xiàn)背景圖更加契合光影掠過的效果，因?yàn)閘inear-gradient每個(gè)漸變點(diǎn)在不同分辨率的屏幕下并不統(tǒng)一，也就是說在高分辨下會(huì)出現(xiàn)殘缺光斑。
暗黑模式下的效果是這樣的：
看起來似乎更加有質(zhì)感一點(diǎn)，除此之外，也許你還想利用transition玩一些更加刺激的效果：
.mylogo:hover {
-webkit-transform: rotate(666turn);
transform: rotate(666turn);
transition-delay: 1s;
transition-property: all;
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}讓我們旋轉(zhuǎn)、跳躍、閉著眼：
結(jié)語：兩套方案都可以很好的實(shí)現(xiàn)光影特效，區(qū)別在于linear-gradient并不會(huì)消耗網(wǎng)站的帶寬，但會(huì)消耗電腦的CPU和內(nèi)存，而與背景漸變相比，背景圖像效果會(huì)更好一點(diǎn)，但是將會(huì)更多地使用網(wǎng)絡(luò)帶寬，而webp技術(shù)又可以幫助我們對(duì)圖片進(jìn)行極致的壓縮(參見：https://v3u.cn/a_id_190)，所以我們可以理解這是一種權(quán)衡，畢竟，書本上寫的是道理，但是現(xiàn)實(shí)中講究的是取舍，不是嗎?
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
