.demo1{
position: relative;
text-decoration: none;
font-size: 20px;
color: #333;
}
.demo1:before{
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width:;
height: 2px;
background: #4285f4;
transition: all .3s;
}
.demo1:hover:before{
width: 100%;
left:;
right:;
}

CSS制作hover下划线动画的更多相关文章

  1. CSS3制作hover下划线动画

    1.前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图 2.实现小黑科技 <div> <a href="javas ...

  2. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  3. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  4. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  5. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  6. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  7. [CSS]textarea设置下划线格式

    功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加t ...

  8. CSS改变字体下划线颜色

    下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...

  9. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

随机推荐

  1. jQuery技术内幕电子版4

    参数selector是复杂HTML代码 则利用浏览器的innerHTML机制创建DOM元素 第157行:如果HTML代码满足缓存条件,则在使用转换后的DOM元素时,必须先复制一份再使用,否则可以直接使 ...

  2. mongodb在window下和linux下的部署 和 安装可视化工具

    Windows安装    安装Mongo数据库: 在发布本文的时间官方提供的最新版本是:2.4.0 ,如果不做特殊声明,本教程所用的版本将会是这个版本. 第一步:下载安装包:http://www.mo ...

  3. HttpWebRequest抓数据遇到的问题

    1.有些网站访问速度慢,而且这个网站的连接数(比如全球内衣,另外对于女生各种什么内衣不懂的也可以上去查看了解哈),因为没有即时的关闭,造成抓取页面数据的时候超时也严重. 解决:把相应的HttpWebR ...

  4. Android Socket编程基础

    前些天写了一个Android手机在局域网内利用Wifi进行文件传输的Demo,其中用到了Socket编程,故此总结(盗了网友的一些图和文字).好久好久没来博客园了~~ 1.什么是Socket? soc ...

  5. 深入了解Angularjs指令中的ngModel

    关于AngularJs的指令的知识学习,请参考... 这次我们接上次没讲完的知识继续. 前端人员在设计表单逻辑时, 在大部分情况下,我们需要为表单定义很多指令, 比如比较两个input内的值是否相同, ...

  6. 像C++一样写JavaScript

    像C++一样写JavaScript C/C++/Java的include或import可以引用第3方文件和包. 这个功能在Html/Js里没有默认的实现. 假设我们有这样一个HTML文件index.h ...

  7. 隐藏TabBar是个累人的活

    最近进行跳转界面隐藏tabbar的时候遇到了一些坑,现在把它记录下来,如果有需要的朋友可以参考一下. 大家一般使用tabbar的时候,隐藏有两种方法. 一种是设置当前所处界面的隐藏属性 self.ta ...

  8. JavaScript 应用开发 #4:切换任务的完成状态

    在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成.所以, 我们需要一个可以切换任务完成状态的方法.在任务模型里面,表示任务状态的属性是 ...

  9. angularjs 更新局部作用域

    前几天项目需要,做了一个背景遮罩的弹出框,html采用js动态添加进去的,结果发现angularjs绑定在这里面不起作用,搜索下解决了,记录下: var smallApplyParent = docu ...

  10. linux根下目录详解及分区建议

    / 根目录    分区大小一定要充足,一般不小于5GB/bin,/usr/bin 普通用户使用命令    建议和/放一起/sbin,/usr/sbin 管理员使用命令/bin,/sbin 操作系统自身 ...