CSS制作hover下划线动画
.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下划线动画的更多相关文章
- CSS3制作hover下划线动画
1.前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图 2.实现小黑科技 <div> <a href="javas ...
- 纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
- [CSS]textarea设置下划线格式
功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线 2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加t ...
- CSS改变字体下划线颜色
下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...
- 关于css中hover下拉框的一个bug
写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...
随机推荐
- Windows Phone8开发工具包简述(转载)
Windows Phone 软件开发包 (SDK) 8.0 可为您提供开发 Windows Phone 8 和 Windows Phone 7.5 应用和游戏所需的工具. 概述Windows Phon ...
- 《C程序设计语言现代方法》第5章 选择语句
关系运算符的优先级低于算术运算符,关系运算符都是左结合的. 判等运算符的优先级低于关系运算符,判等运算符也是左结合的. 逻辑运算符将任何非零值操作数作为真值来处理,同时将任何零值操作数作为假值来处理. ...
- 依据linux Oops信息准确定位错误代码所在行
在linux下调tvp5150am1的过程中,遇到了一kernel oops,内容如下: [ 66.714603] Unable to handle kernel paging request a ...
- kafka consumer 分区reblance算法
转载请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/6238029.html 最近需要详细研究下kafka reblance过程中分区计算的算法细节,网上 ...
- Android项目svn代码管理问题[转]
用svn控制版本,svn本身是不会识别哪些该传,哪些不该传,这就导致有些关于路径的东西(比如拓展jar的路径)也被上传了,而当别人下载后,那个路径对于这个人可能完全不存在,项目编译就会出问题.用ecl ...
- Eclipse中SVN的安装步骤(两种)和使用方法[转载]
一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...
- JavaScript-每隔5分钟执行一次ajax请求的实现方法
个页面好像只能有一个 window.onload=function(){},所以要有多个事件,这样写就好了 window.onload=function(){ //假设这里每个五分钟执行一次test函 ...
- Linux和Windows互传文件命令(转)
sftp>lls 显示当前目录内容 sftp>lcd g:\ 进入本地g盘 sftp>put phpMyAdmin.zip 将本地g盘下的phpMyAdmin.zip上传到/home ...
- NVMe 图解
http://www.ssdfans.com/?p=1143#rd&sukey=3997c0719f151520989740bb972a716fdb2dbab623808d16acd5075b ...
- JDBC Transaction Management Example---reference
In this post, we want to talk about JDBC Transactions and how we can manage the operations in a data ...