zoukankan      html  css  js  c++  java
  • 下划线hover下动态出现技巧

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

    1.下划线从左侧飞入:

    div::before{
        content:"";
        50px;
        position:absolute;
      display:inline-block;
      border-bottom:1px solid red; bottom:0; left:-100px;} div:hover::before{ left:0; 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.下划线从中间向两边伸出

    div::before{
        content:"";
        0px;
        position:absolute;
      display:inline-block; border-bottom:0px solid red; bottom:0; left:50%; transition:all linear 1s;} div:hover::before{ left:0; 50px; border-bottom-2px; }

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

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

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

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

  • 相关阅读:
    为django项目创建虚拟环境
    linux下安装python
    使用scrapy-crawlSpider 爬取tencent 招聘
    linux基础3
    Scrapy
    scrapy-Redis 分布式爬虫
    scrapy-redis(一)
    Linux中文件上传使用rz
    centos 7 安装nginx
    MySQL 5.7 zip 文件安装过程
  • 原文地址:https://www.cnblogs.com/zhangzhiyong/p/9538936.html
Copyright © 2011-2022 走看看