php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果

众所周知，超链接元素在默认情况下鼠标滑过时会出现一条下划线。默认的超链接下划线动画十分的生硬，我们可以通过一些简单的处理，来制作出带平滑过渡效果的超链接下划线动画效果。

先来体验一下这个超链接动画的效果，用鼠标滑过下面的链接试试。

创建这个超链接动画效果非常简单，不需要添加额外的DOM元素。而且如果浏览器不支持这些CSS3动画，会回退到默认的超链接样式，不需要你添加额外的代码来控制。

下面我们开始来制作这个效果。首先第一步是要关闭超链的text-decoration属性，并将超链接的定位设置为相对定位。所以超链接的初始样式为：

a {

position: relative;

color: #000;

text-decoration: none;

}

a:hover {

color: #000;

}

然后我们需要在超链接下方添加一条线条，开始时通过transform属性来将它隐藏。我们可以通过超链接的:before伪元素来制作这个线条，然后通过scaleX()函数将它缩小到0来隐藏它。为了回退(兼容旧的浏览器)，我们可以为不支持CSS3动画的浏览器设置visibility: hidden将其隐藏。

a:before {

content: "";

position: absolute;

width: 100%;

height: 2px;

bottom: 0;

left: 0;

background-color: #000;

visibility: hidden;

-webkit-transform: scaleX(0);

-o-transform: scaleX(0);

transform: scaleX(0);

-webkit-transition: all 0.3s ease-in-out 0s;

-o-transition: all 0.3s ease-in-out 0s;

transition: all 0.3s ease-in-out 0s;

}

我们为超链接的所有变化都设置了0.3秒的ease-in-out动画过渡效果。现在我们只需要在鼠标滑过超链接时，使用scaleX()函数将线条还原即可。

a:hover:before {

visibility: visible;

-webkit-transform: scaleX(1);

-o-transform: scaleX(1);

transform: scaleX(1);

}

到这里一个与众不同的鼠标滑过超链接效果就制作完成了，是不是非常简单呢？

php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果相关推荐

Vant框架 List滑动加载使用
html代码部分: <div class="list-content"><van-pull-refresh v-model= ...
Array王锐力作：osg与PhysX结合系列内容——第5节角色动画效果（下）
[Array王锐大神力作]osg与PhysX结合系列内容--角色动画效果(下) 角色动作的过渡切换角色动画高级技巧构建测试场景并运行数据驱动的角色运动角色动作的过渡切换我们在研究下一步的高级 ...
Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
python控制浏览器不上下滚动失灵_浅谈selenium如何应对网页内容需要鼠标滚动加载的问题...
相信大家在selenium爬取网页的时候都遇到过这样的问题:就是网页内容需要用鼠标滚动加载剩余内容,而不是一次全部加载出网页的全部内容,这个时候如果要模拟翻页的时候就必须加载出全部的内容,不然定位元素 ...
html图片怎么加动画效果,css打造一个动画效果的图片墙
今天我们将开始建立另一个有趣的CSS演示.这次我们将创建一个大的.无缝的照片墙.当用户将鼠标悬停于一个图像,一个透明的黑色渐变效果覆盖在其上面. Demo:点击这里 HTML代码第一步我们需要创建一 ...
滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件.平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现 ...
在Linux下锁住键盘和鼠标而不锁屏
假如在你正看着屏幕上的某些重要的事情时,你不想让你的小猫或者小狗在你的键盘上行走,或者让你的孩子在键盘上瞎搞一气,那我建议你试试 xtrlock 这个工具. 假如在你正看着屏幕上的某些重要的事情时,你 ...
android 加载更多动画效果,Android实践之带加载效果的下拉刷新上拉加载更多
前言之前写的一个LoadingBar,这次把LoadingBar加到下拉刷新的头部.从头写一个下拉刷新,附赠上拉加载更多.下面话不多说了,来一起看看详细的介绍吧. 效果图: 实现过程首先是自定义属 ...

php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果

php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果相关推荐

最新文章

热门文章