效果图：

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. Java 中的 HttpServletRequest 和 HttpServletResponse 对象

    HttpServletRequest对象详解 javax.servlet.http.HttpServletRequest是SUN制定的Servlet规范,是一个接口.表示请求,“HTTP请求协议”的完 ...

  2. ElasticSearch核心知识总结（一）es的六种搜索方式和数据分析

    es的六种搜索方式 query string search GET /ecommerce/product/_search //查询所有数据 { "took": 4,//耗费几毫秒 ...

  3. OpenGL ES: 纹理采样 texture sample

    Sampler (GLSL) Sampler通常是在Fragment shader(片元着色器)内定义的,这是一个uniform类型的变量,即处理不同的片元时这个变量是一致不变的.一个sampler和 ...

  4. Java Web——过滤器

    <Java Web开发技术应用——过滤器> 过滤器是一个程序,它先于与之相关的servlet或JSP页面运行在服务器上.过滤器可附加到一个或多个servlet或JSP页面上,并且可以检查进 ...

  5. Asp.Net Core 发布异常 502.5 [The Application process failed to Start]

    出现这个问题大部分时间都是因为发布时,少打包了一些文件.. 只打包了.Net Core的运行时库,没有打包Asp.Net Core 运行时.. 需要在打包指导文件中加入以下节点 <Propert ...

  6. 自动化测试工具selenium webdirver

    看视频学到的,自动化测试工具,可以模拟用户操作,包括输入,点击等操作 新建新文件夹 在命令行执行npm init  ,一路回车,把项目先初始化 安装  npm install selenium-web ...

  7. 国外程序员整理的 C++ 资源大全 (zt)

    关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了S ...

  8. EOS1.1版本新特性介绍

    EOSIO/eos 目前在github的项目活跃度方面排名第一,release版本更新的速度让人应接不暇.今天EOS的大版本1.1发布,我也有幸参与了贡献,本篇文章重点介绍1.1版本的重大功能升级. ...

  9. 一篇极好的Git 总结

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 常用命令 简单的,常用的命令也就几个.但是想非常熟练使用,怕是要记住几十个. Workspace:工作区( ...

  10. postman传递对象到spring controller的方式

    1.spring Controller @RestController @RequestMapping(value = "/basic/task") public class Ta ...