整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<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小时内与您取得联系。
