.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. EXT 组件一些属性与方法(Tree)

    1.Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisible:是否显示根节点,默认为true. useArrows:是否在树中使用Vista样式箭头,默认为f ...

  2. 【性能测试】【Jmeter】学习(3)——查看测试结果

    监听器——聚合报告 聚合报告添加步骤:(右键点击每一个操作步骤--->“添 加”---->“监听器”---->“聚合报告”) Label:每个 JMeter 的 element(例如 ...

  3. 搜狗一道java题目 关于对象 synchronized 关键字作用在 int, integer

      第一次见到这个题目,我觉得自己没学到java,太浅了,其实这个问题没有考synchronized关键字,只是考什么是对象? 1.在java编程思想的第二章有一句话; 一切都是对象,很可惜int,c ...

  4. ll 命令不好用了,ls 命令没有颜色了怎么办

    可以通过以下命令来实现‘ll’的功能: echo "alias ll='ls -l'" >> ~/.bashrc 其实这个命令是给‘ls -l’命令起了个别名‘ll’, ...

  5. 命令 "sudo -H" 中的这个 "H" 什么作用?

    脚本中使用$HOME变量 问题描述:某些同事原来写的脚本中包含如下内容. BIN_DIR=${HOME}/tools TAIR_BIN_DIR=${HOME}/tair_bin TAIR_SRC_DI ...

  6. ubuntu 安装软件(apt源)

    最近使用docker 构建python3的环境: 进入容器发现 连个vi命令多没有... 1.安装一个呗: apt-get 报错:root@22f41d59e3b2:~# apt-get instal ...

  7. composer 常用命令

    composer list 列出所有可用的命令 composer init 初始化 composer.json文件(就不劳我们自己费力创建啦),会要求输入一些信息来描述我们当前的项目,还会要求输入依赖 ...

  8. 【iOS 7】使用UIScreenEdgePanGestureRecognizer实现swipe to pop效果

    在iOS 7还没有发布的时候,各种App实现各种的swipe to pop效果,比如这里有一份简单的demo. 在iOS 7上,只要是符合系统的导航结构: - (BOOL)application:(U ...

  9. Spring-接口调用

    在Spring框架下实现和调用接口时,不用再代码中创建接口对象.而是依赖容器注入接口的实现对象. 1.创建接口 package service; /** * Created by xumao on 2 ...

  10. 模仿微信&quot;转你妹&quot;游戏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...