效果图：

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. 微信小程序如何调用API实现数据请求-wx.request()

    前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...

  2. Servlet案例1：用户登录

    数据库准备: CREATE DATABASE web; USE web; CREATE TABLE users( id INT PRIMARY KEY AUTO_INCREMENT, username ...

  3. 架构书籍推荐：Java中高级、架构师值得一读！

    上周我们免费送出了6本关于Python的重量级技术书籍,推出后反响特别强烈,有一个和最后一名仅差了一个赞,不过我们还是额外加送了一本送给这位朋友,以资鼓励,从另一面也可以看出Java程序猿对Pytho ...

  4. 【原创】InputStream has already been read - do not use InputStreamResource if a stream needs to be read multiple times

    一.背景 基于SpringBoot 构建了一个http文件下载服务,检查tomcat access 发现偶尔出现500 状态码的请求,检查抛出的异常堆栈 2019-03-20 10:03:14,273 ...

  5. Python内置类型(1)——真值测试

    python中任何对象都能直接进行真假值的测试,用于if或者while语句的条件判断,也可以做为布尔逻辑运算符的操作数 python中任何对象都能直接进行真假值的测试,而不需要额外的类型转换 这一点是 ...

  6. 当x，y和theta都是向量的时候如何计算损失

    function J = computeCost(X, y, theta) %COMPUTECOST Compute cost for linear regression % J = COMPUTEC ...

  7. 源码编译安装lnmp环境

    一.源码编译安装步骤 首先说明源码安装的好处   速度快,可自定义路径 主要有三步:1.配置 进入源码安装包  ./configure --prefix=/uer/local/nginx  可指定参数 ...

  8. 高手速成android开源项目【项目篇】

    主要介绍那些Android还不错的完整项目,目前包含的项目主要依据是项目有意思或项目分层规范比较好.Linux项目地址:https://github.com/torvalds/linuxAndroid ...

  9. C#中List的方法RemoveAt小测试

    结论:在C#中将一个List中的项插入到别一个List中,会复制,而不是从源List中移除. 示例如下 void Start () { TestList (); } void TestList () ...

  10. 读vue-0.6-text-parser.js源码

    提取字符串中的表达式 var BINDING_RE = /\{\{(.+?)\}\}/; function parse(text) { // 找不到返回null if (!BINDING_RE.tes ...