有关css编写文字动态下划线
<div class="main_text">哈哈这就是我的小视频</div>
上面为html代码
接下来进行css的编写
.main_text{
position:relative; //给其一个相对定位
}
.main_text::after{ //我们要对其使用伪类元素
content:"";
width:100%;
height:1px;
position:absolute;
left:;
bottom:;
background-color:#000; //这里颜色可以自己设定,也可以设置继承和文字一样的颜色
transform:scale(0); //刚开始是没有放大的
transform-origin:left bottom; //这个属性必须要在transform之后,他定义的是一个基点,具体的需要自己百度去看一看,我们这里定义的是在左下角
transition:all 0.4s; //给其一个动画时间
}
.main_text:hover::after{
transform:scale(1); //当元素被hover時,伪类元素放大
}
以上代码就是这样,可以根据自己的需求来进行更改就可以了
有关css编写文字动态下划线的更多相关文章
- css给文字加下划线
语法:linear-gradient(direction, color-stop 1, color-stop 2,……) 简单用法:background-image: linear-gradient( ...
- css标题文字和下划线重叠
<view class="text"> <text class="textCon">标题</text> <text c ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- iOS - UIButton设置文字标题下划线以及下划线颜色
创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...
- 文字排版--下划线(text-decoration:underline)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- html网页中如何给文字加入下划线
网页中一些重要的文字或者特殊性高的文字,例如:链接,标注等我们需要加上下划线,那么这里我们就需要使用到<U>标签了,写法如下 字体下划线: <u>这里添加内容</u> ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 1.1.15 word调整文字与下划线之间的间距
先请按CTRL+U快捷键,或点击“下划线”按钮,然后输入一个空格,再输入文字“下划线间距”,在文字的尾部再添加一个空格.选中文字内容(注意不要选中首尾的空格),单击菜单“格式”→“字体”,在“字体”设 ...
- 纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
随机推荐
- 我的一个git(码云)之旅
合作开发项目,你就会用到git,现在码云比较简单,因为是中文化界面,学习起来难度比较低,又支持5人以下项目免费,所以学习码云更好入手一点. 下面的东西适合一些个基础比较低的用户学习,因为我就是啊... ...
- Python程序打包EXE遇到的各种坑
废话不多说,反正我现在还没成功,不过我记录一下遇到的坑! 1:安装相关库太慢 解决办法:离线安装 在一大堆教程中,要安装好几个库,但是有些库用pip在线安装一直卡死(看不到进度条,就当卡死吧),这个问 ...
- convertto-securestring结果 使用python解密
根据微软帮助文档,convertto-securestring有两种加密模式.如果在指定密码的情况下,则使用aes加密,否则使用windows dpapi加密.而且aes加密也没有指明iv值与加密模式 ...
- 使用stringstream打破字符与其他类型之间的隔阂
考虑这样一个问题:给您一行各位数字,计算它们的和.数字之间用空格隔开.只能使用字符串. 一般考虑使用getchar,但这对于不熟悉 ASCLL 码的同学十分困难.C++的sstream头文件中提供了十 ...
- 用Python在Linux下调用新中新DKQ-A16D读卡器,读二代证数据
1.背景 最近在研究二代证读卡器,手头上的设备是新中新DKQ-A16D,在官网(https://www.onecardok.com.cn/download)逛了一圈,发现Win下的示例,浏览器插件很多 ...
- Springboot笔记(二)整合
1.整合Freemarker 一种模板引擎,前端渲染模板的,类似于EL,jsp,不过比前两个好用 导入很简单 pom.xml <dependency> <groupId>o ...
- 给Hangfire的webjob增加callback和动态判断返回结果功能设计
背景介绍 通常业务中需要用到定时执行功能,我用hangfire搭建了一个调度服务,这个调度服务是独立于业务逻辑的,具体可以参考文章:https://github.com/yuzd/Hangfire.H ...
- 20200220--python学习第13天
今日内容 作业题(21题) 推导式 装饰器 模块[可选] 内容回顾 1.函数 a.参数 def func(a1,a2):pass def func(a1,a2=None):pass 默认参数推荐使用不 ...
- 一本彻底搞懂MySQL索引优化EXPLAIN百科全书
1.MySQL逻辑架构 日常在CURD的过程中,都避免不了跟数据库打交道,大多数业务都离不开数据库表的设计和SQL的编写,那如何让你编写的SQL语句性能更优呢? 先来整体看下MySQL逻辑架构图: M ...
- Android Studio 找不到夜神模拟器的解决办法
Android Studio 找不到夜神模拟器的解决办法 1.启动夜神模拟器 2.找到你电脑上的夜神安装目录,在bin目录下打开cmd窗口,运行命令 nox_adb.exe connect 127.0 ...