效果图：

html：

<div class='site_bar'>首页</div>

css:

.site_bar{

　　background-image : linear-gradient(red,red);

　　background-position : center bottom;

　　background-size : 0 2px;

　　background-repeat : no-repeat;  //这个属性不能少。

　　transition : .3s;

}

.site_bar:hover{

　　background-size : 100% 2px;

}

纯css实现元素下出现横线动画（background-image）的更多相关文章

  1. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  3. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  4. 纯css实现select下拉框并排显示

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

  5. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  6. 如何用纯 CSS 创作一个小球上台阶的动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PBGJwL 可交互视频 ...

  7. 如何用纯 CSS 创作一个小球反弹的动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 ...

  8. 前端每日实战：85# 视频演示如何用纯 CSS 创作一个小球反弹的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 此视频是可 ...

  9. 纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...

随机推荐

  1. Akka-Cluster（2）- distributed pub/sub mechanism 分布式发布/订阅机制

    上期我们介绍了cluster singleton,它的作用是保证在一个集群环境里永远会有唯一一个singleton实例存在.具体使用方式是在集群所有节点部署ClusterSingletonManage ...

  2. video设置autoplay 不起作用

    video 标签上添加 muted https://blog.csdn.net/taiyangmiaomiao/article/details/80266625

  3. gitlab服务部署及使用

    一.什么是gitlib Gitlab 是一个基于Git实现的在线代码仓库托管软件,你可以用Gitlab自己搭建一个类似于Github一样的系统平台,一般搭建gitlab私服就是用在公司的内部 Gitl ...

  4. 【转】浮点数与IEEE 754

    http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1.   什么是浮点数 在计算机系统的发展过程中,曾经 ...

  5. UFLDL 教程学习笔记（二）反向传导算法

    UFLDL(Unsupervised Feature Learning and Deep Learning)Tutorial 是由 Stanford 大学的 Andrew Ng 教授及其团队编写的一套 ...

  6. javascript的hashCode实现

    hashCode = function(str){ var hash = 0; if (str.length == 0) return hash; for (i = 0; i < str.len ...

  7. CentOS7安装tyk（内部部署）

    CentOS7安装tyk(内部部署) 参考 官方文档 github 环境准备 #确保端口3000处于打开状态:Dashboard使用该端口来提供GUI和Developer Portal #Tyk需要P ...

  8. JAVA中的糕富帅技术——反射（一）

    前言 突然发现好久没写博客了,前面写的都是关于Android的东西,今天心血来潮突然有一种冲动想写一篇基于JAVA技术的博客,别问我为什么?有钱.任性! 今天就来谈谈反射机制:学过JAVA的人不一定懂 ...

  9. 用node.js写一个jenkins发版脚本

    背景 每次到网页里手动发版有点烦,写个脚本来提高开发效率. CFG 在 jenkins 设置里获取 API TOKEN. 把 host 和账号密码拼接起来就可以通过鉴权. const token = ...

  10. ElasticSearch实战－编码实践

    1.概述 前面在<ElasticSearch实战-入门>中给大家分享如何搭建这样一个集群,在完成集群的搭建后,今天给大家分享如何实现对应的业务功能模块,下面是今天的分享内容,目录如下所示: ...