酷炫的动画效果往往更能吸引眼球,下面我将分享纯CSS中,hover的时候出现下划线动态飞入的技巧。

1.下划线从左侧飞入:

  1. div::before{
  2. content:"";
  3. width:50px;
  4. position:absolute;
      display:inline-block;
      border-bottom:1px solid red;
  5. bottom:0;
  6. left:-100px;}
  7. div:hover::before{
  8. left:0;
  9. transition:all linear 1s;}

  步骤:首先是设置div为相对位置(relative,主要用于before子元素的定位。因为绝对位置的定位要求其父元素的position属性值不能为static,而relative优点在于能保留原来的位置,故选用relative)。

     其次通过伪元素before创建div元素下的第一个位置的子元素,设置其为绝对位置(absolute),同时修改其显示属性为行内块(display:inline-block;)。

       第三是设置伪元素before的位置,将其定位到div父元素的前面,同时设置div隐藏区域以外的区域(overflow:hidden;)

       第四是设置当div被hover时,伪元素before回到div父元素的最左侧,并设置持续时间。

    这样就完成了下划线在hover时从左侧并入。如果要从右侧出现,则只需把相应位置进行更新即可。

2.下划线从中间向两边伸出

  1. div::before{
  2. content:"";
  3. width:0px;
  4. position:absolute;
      displayinline-block
  5. border-bottom:0px solid red;
  6. bottom:0;
  7. left:50%;
  8. transition:all linear 1s;}
  9. div:hover::before{
  10. left:0;
  11. width:50px;
  12. border-bottom-width:2px;
  13. }

  下划线从中间向两边伸出大部分与下划线从两边伸出相似,不同之处在于:

    首先设置子元素位置在中间,即left:50%,同时width:0px;

    其次hover时设置子元素位置右中间变到最左侧(即left:0;);同时设置子元素的宽度(即width:50px)。

  这样就能实现两个过程:一是下划线从中间向左侧整体移动,二是下划线向右侧延伸。

下划线hover下动态出现技巧的更多相关文章

  1. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  2. TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  3. python 面向对象三 访问权限 下划线 双下划线

    一.双下划线 如果要让内部属性不被外部访问,可以把属性的名称前加上两个下划线__,在Python中,实例的变量名如果以__开头,就变成了一个私有变量(private),只有内部可以访问,外部不能访问. ...

  4. PostgreSQL解决"Abc_de_fghijkl_mn" 首字母小写去掉下划线并且下划线后面的第一个字母大写或首字母大写去掉下划线并且下划线后面的首字母大写的js

    select "lower"(substr('Abc_de_fghijkl_mn', 1, 1)) || substr(replace(REGEXP_REPLACE(INITCAP ...

  5. python 单下划线/双下划线使用总结

    文章转自:http://blog.csdn.net/pfm685757/article/details/45918575

  6. 详解 Python 中的下划线命名规则

    在 python 中,下划线命名规则往往令初学者相当 疑惑:单下划线.双下划线.双下划线还分前后……那它们的作用与使用场景 到底有何区别呢?今天 就来聊聊这个话题. 1.单下划线(_) 通常情况下,单 ...

  7. Python的下划线_

    1.单下划线(_) 通常情况下,单下划线(_)会在以下3种场景中使用: 1.1 在解释器中: 在这种情况下,"_"代表交互式解释器会话中上一条执行的语句的结果.这种用法首先被标准C ...

  8. 使用CSS去除 去掉超链接的下划线方法

    我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...

  9. Python 下划线

    单下划线 "单下划线" 开始的成员变量叫做保护变量,意思是只有类对象和自类对象自己能访问到这些变量. 例子:以单下划线开头(_foo)的代表不能直接访问的类属性,需通过类提供的接口 ...

随机推荐

  1. 黑客攻防技术宝典web实战篇:工具web服务器习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 在什么情况下 Web 服务器会显示目录列表? 如果请求某目录的 URL 且满足以下条件,W ...

  2. 莫队初探(不带修/例题极少)By cellur925

    因为今天考到莫队裸题了嘤嘤嘤...而我这样的蒟蒻肯定不会这样的高端算法啊QAQ.于是暴力水了40分qwq. 正如上文所说,我实在太菜了,于是学习莫队也只是学习了最简单的不带修普通莫队,如果我能苟到省选 ...

  3. $P2872\ [USACO07DEC]道路建设Building\ Roads$

    \(problem\) 错的原因是\(RE\)(大雾 , 时刻谨记 \(N\) 个地方的话 保守开 \(\frac{N^2}{2}\) 大小. 因为是边. 边最多的情况即完全图 : $1+2+3+4. ...

  4. iOS NSUserDefaults [setValue:forKey:] [setObject:forKey:] <Objc> setValue(_,forKey:) set(_,forKey) <Swift 3>

    前者其实是NSObject都可以调用的KVC方法,后者才是NSUserDefaults的实例方法: 这里参数的类型是nullable id,但是我建议你在传null的时候慎重考虑,否则你的应用就可能面 ...

  5. bzoj 5017 [Snoi2017]炸弹

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=5017 题解 如果数据范围小一点那么就缩点 然后跑一个基础的DAG上的dp就好了 但是边数是$ ...

  6. HDU6438(贪心技巧)

    第一眼喜闻乐见的股票问题dp可以暴力,然鹅时间不允许. 于是考虑怎么贪. 这篇题解说得很生动了. 因为每支股票都有买入的潜力所以肯定都加在优先队列里. 然后考虑的是哪些需要加入两次.这是我第二次见到类 ...

  7. 二分查找 BestCoder Round #36 ($) Gunner

    题目传送门 /* 题意:问值为x的个数有几个,第二次查询就是0 lower/upper_bound ()函数的使用,map也可过,hash方法不会 */ #include <cstdio> ...

  8. PopupWindow(3)back,home 键无法关闭popupwindow的解决方案

    private PopupWindow mPopupWindow; //popup window 一般popuowindow 要都个显示view,本例子中view模拟菜单. private View ...

  9. Java开发笔记(九十五)NIO配套的文件工具Files

    NIO不但引进了高效的文件通道,而且新增了更加好用的文件工具家族,包括路径组工具Paths.路径工具Path.文件组工具Files.先看路径组工具Paths,该工具提供了静态方法get,输入某个文件的 ...

  10. hdu1513 Palindrome

    思路: dp+滚动数组. 实现: #include <iostream> #include <cstdio> #include <string> #include ...