整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<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
歡看電影的朋友肯定會注意到一個有趣的細節，就是電影出品方一定會在片頭的Logo環節做一個小特效：暗影流動之間光澤一閃而過，這樣做不僅可以提高Logo的辨識度，還可以提升質感，一舉兩得。參照華納兄弟影業(Warner Bros. Pictures)的例子：
那么，在前端領域，如果使用純CSS技術，能不能實現類似的特效呢？答案當然是可以的，這次我們以本站的Logo為例子，以一持萬、提綱挈領地講解一下如何使用純CSS技術實現圖片Logo鼠標懸停光澤一閃而過的光影特效。
一般情況下，大多數前端開發會選擇 linear-gradient() ，這個方法創建一個表示兩種或多種顏色線性漸變的圖片。其結果屬于<gradient>數據類型，是一種特別的<image>數據類型。
簡單用法：
/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */
linear-gradient(0deg, blue, green 40%, red);那么它怎么和logo圖片結合使用呢？首先創建一個對象，因為是logo，所以我使用a標簽，也就是超級鏈接，隨后聲明偽類mylogo：
<a href="/" class="mylogo" title="劉悅的技術博客"></a>之后，定義logo的樣式：
.mylogo{
display:block;
margin: 0 auto;
width:255px;
height:200px;
background-image:/logo.png;
background-repeat: no-repeat;
}接著就是linear-gradient()出場，原理并不復雜，利用linear-gradient繪制一個白色半透明漸變層，利用背景的負坐標隱藏起來，同時配合transition屬性，在鼠標懸停(hover)的時候，設置1秒鐘的延時動畫，逐漸將光斑的坐標進行位移，產生一種光澤掠過的效果：
.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;
}這里需要注意的是，默認負坐標一定要超過logo本體的寬度，否則位移就不夠充分，效果是下面這樣的:
看起來還不錯，這里transition的屬性設置在logo本體的偽類上面，此時如果logo本體失去鼠標的焦點，光斑位置又會回到原來的負坐標，此時光影又會在回閃一次，也就是一次懸停發生兩次位移，閃爍兩次，如果只想閃一次，可以將transition加載hover偽類中，這樣離開后不會二次位移，因為動畫效果只會出現在鼠標懸停上，鼠標離開后，就沒有動畫回閃了：
.mylogo{
width: 255px;
height: 200px;
/*直接使用background縮放版本*/
/*每個漸變點的位置不能太小，不然會出現殘缺光斑*/
/*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{
/*鼠標滑過實現光斑滑動，但是在多背景情況下，需要多個background-position屬性值，否則會影響其他背景*/
background-position: 200px 0, 0 0;
transition: 1s ease;
}效果是這樣的：
但是這就結束了嗎？還沒有，因為這看起來似乎。。。有點一律千篇？
如果所有人都用linear-gradient，就難免有點無趣了，那么有沒有別的不落窠臼的玩兒法呢？
既然曉得了原理，無非就是位移產生的小把戲，那么我們完全脫離linear-gradient，使用一張帶光澤質感的背景圖片shine.png：
由于使用了背景圖，所以我們需要對代碼進行修改，為實體的背景圖添加一個容器，span標簽：
<a href="/" class="mylogo" title="劉悅的技術博客"><span></span></a>樣式和linear-gradient差不多，也是利用負坐標將span標簽內的背景圖隱藏起來：
.mylogo span {
display: block;
background: url("/shine.png") -360px -380px no-repeat;
transition-property: all;
transition-duration: .7s;
height: 200px;
width: 255px;
}接下來要比linear-gradient要簡單地多，直接設置懸停屬性，讓背景圖片發生位移：
.mylogo:hover span {
background-position: 100px 300px;
}效果是這樣的：
如果仔細觀察，會發現背景圖更加契合光影掠過的效果，因為linear-gradient每個漸變點在不同分辨率的屏幕下并不統一，也就是說在高分辨下會出現殘缺光斑。
暗黑模式下的效果是這樣的：
看起來似乎更加有質感一點，除此之外，也許你還想利用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)
}讓我們旋轉、跳躍、閉著眼：
結語：兩套方案都可以很好的實現光影特效，區別在于linear-gradient并不會消耗網站的帶寬，但會消耗電腦的CPU和內存，而與背景漸變相比，背景圖像效果會更好一點，但是將會更多地使用網絡帶寬，而webp技術又可以幫助我們對圖片進行極致的壓縮(參見：https://v3u.cn/a_id_190)，所以我們可以理解這是一種權衡，畢竟，書本上寫的是道理，但是現實中講究的是取舍，不是嗎?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
