CSS制作hover下划线动画

.demo1{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo1:before{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 2px;
            background: #4285f4;
            transition: all .3s;
        }
        .demo1:hover:before{
            width: 100%;
            left: 0;
            right: 0;
        }
时间: 2024-08-04 10:36:53

CSS制作hover下划线动画的相关文章

CSS3制作hover下划线动画

1.前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图 2.实现小黑科技 <div> <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a> </div> .demo1{ position: relative; text-decoration: none; font-size: 20px; col

经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> <style type="text/css"> nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#

css制作简单下拉菜单

要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul> <li><a href='#'>one</a></li> <li><a href='#'>two</a></li> <li><a href='#'>three</a>&l

[CSS]textarea设置下划线格式

功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加text-indent来实现缩进. 源代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text

CSS改变字体下划线颜色

下图是网页中一个很普通的列表. 这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视).做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变. 额,那怎么办? 办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可. CSS代码:style="border-bottom: 1px solid blue;t

纯html+css制作3D立方体和动画效果

今天放上来的,是一个用css3制作的立方体+动画,效果如下. 整个效果都只用了html和css,没有一句js,其实起初是使用了js来给六个面的小方格们赋值,后来强迫症犯了,直接手动写上吧,这样一句js都没有,更干脆利落点. 如下为body内整体结构,一个类名为big的盒子内,放置六个ul,每个ul赋予不同的类名,标明了ul面所在的位置,这六个ul会作为立方体的六个面. <div class="big"> <ul class="after">&

下划线 动画

<ul class="ddd"> <li class="solid active">啦啦啦啦</li> <li class="solid">我哦我我</li> <li class="solid">哦哦哦哦</li> <li class="solid">噢噢噢噢</li> <li class=&q

css导行下拉动画

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>daohangtexiao</title><style>   *{     margin:0px;     padding:0px;     list-style:none;     /*列表序列号设置为没有*/     font-family:

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

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