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挡住(截图是已 ...
随机推荐
- bayer图像格式
Bayer数据,其一般格式为:奇数扫描行输出 RGRG……偶数扫描行输出 GBGB…… 根据人眼对彩色的响应带宽不高的大面积着色特点,每个像素没有必要同时输出3种颜色.因此,数据采样时, 奇数扫描行的 ...
- Django自定义用户认证
自定义一个用户认证 详细参考官方文档: https://docs.djangoproject.com/en/1.9/topics/auth/customizing/#django.contrib.au ...
- cat、cp命令
cat是查看文件内容, cp –cp是连目录及件文件都拷贝 cp是拷贝文件 a.txt里的内容是, abc def ghi cat a.txt |grep –v ghi 得到结果, abc def h ...
- [Python]网络爬虫(二):利用urllib2通过指定的URL抓取网页内容
版本号:Python2.7.5,Python3改动较大. 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 类似于使用程序模拟IE浏览器的功能,把URL作为HTTP请求的 ...
- Shell函数参数
在Shell中,调用函数时可以向其传递参数.在函数体内部,通过 $n 的形式来获取参数的值,例如,$1表示第一个参数,$2表示第二个参数... 带参数的函数示例: #!/bin/bash funWit ...
- 字符串hash函数
本文搜集了一些字符串的常用hash函数. 范例1:判断两个单词是否含有相同的字母,此时我们可以用hash做.例如,“aaabb”与"aabb"含有相同的单词.(参考:http:// ...
- jvm内存GC详解
一.相关概念 a. 基本回收算法 1. 引用计数(Reference Counting) 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回收时,只用收 ...
- 如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题.
- 王灏:光音网络致力打造Wi-Fi大生态圈
光音网络,做的是本地网络综合服务.在中国,想把互联网做到覆盖延伸范围之外的最后100米,光音网络是当中一家,也是最坚持的一家.为千万家本地生活商户提供帮助,为数亿本地用户提供最佳的本地网络体验,这是光 ...
- android-配置虚拟机Virtual device
Android的应用程序是基于virtual device运行的,在运行一个android的应用程序之前先要配置要virtual device