利用css实现鼠标经过元素,下划线由中间向两边展开
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 1px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<div id="underline"></div>
</body>
</html>
参考文:https://blog.csdn.net/qq_31648761/article/details/72953434?locationNum=9&fps=1
方法二:
<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>Audio Description</a> css:
.ui-box {
text-decoration:none;
border:none;
font-family:‘Roboto‘, sans-serif;
font-size:14px;
position:relative;
vertical-align:baseline;
padding:10px
}
.bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>.ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {
content:‘‘;
position:absolute
}
.bottom-inOutSpread:after {
border-bottom:2px solid #333;
left:51%;
right:51%;
bottom:0px;
-webkit-transition-property:all;
-moz-transition-property:all;
-o-transition-property:all;
transition-property:all;
-webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
-webkit-transition-duration:200ms;
-moz-transition-duration:200ms;
-o-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s
}
.bottom-inOutSpread:hover:after {
left:0%;
right:0%
}
.bottom-inOutSpread:not(:hover):after {
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s
}
原文:http://www.cnblogs.com/HONGYE1994/p/8012093.html
利用css实现鼠标经过元素,下划线由中间向两边展开的更多相关文章
- 使用CSS去除 去掉超链接的下划线方法
我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到 1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...
- css命名为何不推荐使用下划线_
一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...
- CSS超链接样式,去除下划线等
控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...
- 通过css控制超链接不显示下划线
“页面属性”——“链接”——“下划线样式”——“始终无下划线” <style type="text/css"> a:link { text-decoration: no ...
- css:url链接去下划线+点击前黑色+点击时灰色+点击后黑色
一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...
- CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案
经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...
- css如何让父元素下的所有子元素高度相同
小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...
- CSS 控制鼠标在元素停留的样式
以下资料来自网络,收藏学习总结用: 有时候需要改变鼠标样式,DIV 可以改成手型等,A也可以改成光标形式 巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊.CSS鼠标样式 ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
随机推荐
- Navicate一个有用的注册码
NAVH-WK6A-DMVK-DKW3 百度直接得到,
- java String final + equal == 区别
java String 是不可改变的类型. String a = "hello2"; String d = "hello"; final String b = ...
- 用截取的部分图像创建新图像--关于cvGetSubRect,cvGetImage的用法
CvMat* cvGetSubRect(const CvArr* arr, CvMat* submat, CvRect rect)可以把截取图像中需要的区域存入矩阵.把IplImage *传给arr, ...
- Java集合操作类Collections的一些常用方法
public static void main(String[] args) { List<Integer> list = new ArrayList<Integer>(); ...
- ACM学习历程—HDU 5073 Galaxy(数学)
Description Good news for us: to release the financial pressure, the government started selling gala ...
- iOS奇怪的问题,键盘偏移异常
现象描述: 点击UITextView,键盘会弹出.然后点击添加图片,弹出了ActionSheet,键盘自动收缩.接着关闭ActionSheet,发现键盘又弹出了,接着点击Done,想要隐藏键盘,却发现 ...
- 用VBA计算两个日期之间的工作日(去掉周末两天)
最近公司HR和Finance想算员工的工作天数,想让我帮忙写些VBA,自己从网上找了下代码,自己再改改,以下来自网络. 计算两个日期之间的工作日,用VBA,因量大,最好用数组做 Sub kk() Di ...
- bzoj 2648 SJY摆棋子——KDtree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2648 第一道KDtree! 学习资料:https://blog.csdn.net/zhl30 ...
- linux下mysql配置查询
1.查看mysql的数据文件存放位置 show variables; 显示结果中的: datadir的值即是. 2.查看mysql是否支持表分区 SHOW VARIABLES LIKE '%parti ...
- VijosP1274:神秘的咒语
描述 身为拜月教的高级间谍,你的任务总是逼迫你出生入死.比如这一次,拜月教主就派你跟踪赵灵儿一行,潜入试炼窟底. 据说试炼窟底藏着五行法术的最高法术:风神,雷神,雪妖,火神,山神的咒语.为了习得这些法 ...