CSS样式

//不只是a标签,其他有下划线的字体也可以

a:hover{

 color: #ff3100; //这里的颜色是指字体颜色不是波浪下划线效果的svg图颜色
    text-decoration: none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%
    background-size: 20px auto;
    animation: waveMove 1s infinite linear;
}
 
 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%

下划线文字,鼠标hover小样式的更多相关文章

  1. 解决文字和text-decoration:underline下划线重叠问题

    一.text-decoration:underline下划线的问题 CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会 ...

  2. 5-去掉a标签下划线,禁止a标签的跳转

    1.去下划线: 写样式,a{text-decoration:none; 或在a标签内联里面写style="text-decoration:none;": 2.禁用a标签跳转: a标 ...

  3. 超链接标签a样式生效,取消下划线,文字垂直(上下)居中

    直接设置超链接标签a的属性时并不会生效, 需要将display属性改为inline-block, 即style="display:inline-block" 添加标签a时,默认是有 ...

  4. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  5. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  6. CSS超链接样式,去除下划线等

    控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

  7. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  8. php 把驼峰样式的字符串转换成下划线样式的字符串

    1.如何在php中把驼峰样式的字符串转换成下划线样式的字符串.例:输入是FooBar的话,输出则是foo_bar 以下是用正则的方式去完成,既然用到正则,方法肯定就不只一种,我们看下下面的方式 ech ...

  9. 利用css实现鼠标经过元素,下划线由中间向两边展开

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. 如何使用 python 接入虹软 ArcFace SDK

    公司需要在项目中使用人脸识别SDK,并且对信息安全的要求非常高,在详细了解市场上几个主流人脸识别SDK后,综合来看虹软的Arcface SDK比较符合我们的需求,它提供了免费版本,并且可以在离线环境下 ...

  2. Arduino基础入门篇-进入Arduino的世界

    写在前面,首先是发现有网友对Arduino做了介绍,而且介绍比较清晰到位,就引用过来了. 文章出处:https://blog.csdn.net/TonyIOT/article/details/8091 ...

  3. 最新 竞技世界java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.竞技世界等10家互联网公司的校招Offer,因为某些自身原因最终选择了竞技世界.6.7月主要是做系统复习.项目复盘.Leet ...

  4. eNSP——利用单臂路由实现VLAN间路由

    原理: 以太网中,通常会使用VLAN技术隔离二层广播域来减少广播的影响,并增强网络的安全性和可管理性.其缺点是同时也严格地隔离了不同VLAN之间的任何二层流量,使分属于不同VLAN的用户不能直接互相通 ...

  5. [转帖]curl网站开发指南

    curl网站开发指南 http://www.ruanyifeng.com/blog/2011/09/curl.html linux 里面有非常多很好的工具 比如这个 curl 之前 以为 wget 就 ...

  6. 打印 request 请求中的参数

    @SuppressWarnings({"rawtypes"})private void showParams(HttpServletRequest request) { Map&l ...

  7. Intellj IDEA快捷键入门 之 Ctrl+Space(空格)

    Intellj IDEA快捷键入门 之 Ctrl+Space(空格) 时间:2019/11/28 系统:Win10系统 背景: Win10系统下,想把ctrl+space(空格)切换输入法取消, 以防 ...

  8. QT QcustomPlot的使用(二)

    在QcustomPlot中,给横纵坐标添加箭头的方法 //在末尾添加箭头 customPlot->xAxis->setUpperEnding(QCPLineEnding::esSpikeA ...

  9. php 处理图片 将图片转成base64

    1.直接将图片路径传入下面该方法就可以了//将图片转成base64 public function imgToBase64($img_file){ $img_base64 = ''; if ($img ...

  10. ES6——入门学习指南

    ES6的简介: ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序 ...