纯css实现元素下出现横线动画(background-image)

效果图:

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;

}

原文地址:https://www.cnblogs.com/zhucj/p/10072480.html

时间: 2024-10-09 12:52:59

纯css实现元素下出现横线动画(background-image)的相关文章

使用纯CSS设计网页下拉菜单代码

分享一个纯CSS写的下拉菜单代码,结构非常简单,代码十分清晰,HTML+CSS下拉菜单代码.HTML代码部分: 在线预览>> <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href=&quo

强大的CSS:文字下波浪线动画效果

之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现 就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的. 所以,我们只要使用径向渐变绘制圆弧,再通过background-position控制两个圆弧的位置,让其前后拼接在一起就可以实现波浪线效果. 相关CSS代码如下: .flow-wave { backg

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

这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

纯CSS+HTML制作网页加载动画

我们都知道网页的加载需要一定的时间, 即使我们在努力优化代码执行效率以及压缩文件, 但是还是需要时间啊,  在这段时间内如果表面上不发生任何事情, 用户就会有比较糟糕的体验, 但是如果有一个动画或者一个进度条, 那就完全不一样了, 这篇文章分享纯CSS+HTML加载动画代码 HTML代码如下 <div id="start-screen"> <div class="in-start"> <div class="first&quo

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } select { text-align: center; height: 50px; overflow: hidden; border:

前端每日实战:127# 视频演示如何用纯 CSS 创作一个圆环旋转错觉动画

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPWJNj/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cbvPWHM 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/

纯css 来实现下拉菜单

对于导航栏中的下拉菜单,是我们在项目中遇到最多的一种下拉菜单的情况, 一般儿情况下,我们都是常用JavaScript 来实现下来功能.不过, 我们都知道,当我们在编码过程中,如果能用css 实现的功能,绝不用 js 去控制, 这是因为对于计算机而言,js 的性能远不及css 稳定,所以,对于下拉菜单我们同样可以用css 来实现. html部分: 1 <ul id="headerTabs"> 2 <li> 3 <a href="/found/tra

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

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PBGJwL 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cDMyyHv 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/

纯css实现的下拉导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>老Y天下-网页特效-导航菜单-漂亮的二级下