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挡住(截图是已 ...
随机推荐
- Nido.Common.Utilities.MD5类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...
- PowerDesigner 如何生成数据库更新脚本
最近在学习使用PowerDesigner 这个数据库设计工具,发现真的很强大,可以做很多事情,其中就涉及到如果数据库要进行更新了怎么办,主要是增加表,最麻烦的是修改字段名称,增加字段等操作,遇到主要的 ...
- 开发者MAC电脑里的十八般兵器
古人常以刀.枪.剑.戟.斧.钺.铲.叉.鞭.锏.锤.戈.镋.棍.槊.棒.矛.钯十八种兵器,样样精通,来形容一个人的武学技能get状态.在开发者的世界里,熟练掌握各种辅助工具,可以达到事半功倍,快速提高 ...
- linux 下信号处理命令trap && linux下各种信号的意义
1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...
- AX2012服务器配置--Windows Server 2012 如何实现多个用户远程桌面登陆?
Windows Server 2012 如何实现多个用户远程桌面登陆?说明:Windows Server 2012默认情况下,只运行2个用户远程桌面登陆,这里我们可以通过安装远程桌面会话主机配置来实现 ...
- nginx日志格式含义
- PHP学习笔记-00
PHP这门语言的就不用多说啦,使用率非常高的一门后端开发语言.之前一直希望可以学习了解一下PHP.之前主要在做Java和OC这类语言的开发,对于PHP这种脚本语言(动态语言)还是了解甚少. 近期看了一 ...
- Android Butterknife框架配置
一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...
- 绿色tftpserver:tftpd32的配置
嵌入式开发中少不了用到TFTP服务,它的功能主要是用来给目标板传输文件. tftpd32.exe是如今最经常使用的TFTPserver,今天就来介绍它的配置方法. 1.从这里 下载新版本号tftpd3 ...
- Lua 5.2 中文参考手册
闲来无事,发现Lua更新到了5.2.2,参考手册也更到了5.2,在网上发现只有云风翻译的5.1版,花了几天时间翻译了一些. 参考手册有点长,又要随时修改,所以在github上建了项目,有需要的朋友可以 ...