有关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的同级通用 ...
随机推荐
- 1751: n个素数构成等差数列
#include <stdio.h>int fill(char *map,int *primes) { for (int i = 2; i < 1001; i++) { map[i] ...
- 暑假第七周总结(安装MongoDB和Tomcat以及MongoDB进行编程实践)
本周主要对MongoDB和Tomcat进行了安装,两项安装都遇到了一些问题.其中在对MongoDB安装过程中出现了什么没有秘钥安全证书的,最终找了一堆教程重复了好多遍之后安装成功,虽然在启动和关闭的时 ...
- python3中的继承和多态
*继承 当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Super clas ...
- tmobst3
1.(单选题)如果数据库是oracle,则generator属性值不可以使用(). A)native B)identity C)hilo D)sequence 2.(单选题)为了获得用户提交的表单参数 ...
- Spring注入bean的方式
在Spring容器中为一个bean配置依赖注入有三种方式: · 使用属性的setter方法注入 这是最常用的方式: · 使用构造器注入: · 使用Filed注入(用于注解方式). 使用属性的se ...
- An internal error occurred during: "Launching New_configuration". Path for project must have only on
在Eclipse中按照如下操作 Project -> Properties -> Run/Debug Settings: 1. select "Launching New_con ...
- Codeforces_820
A.直接模拟. #include<bits/stdc++.h> using namespace std; int c,v0,v1,a,l; int main() { ios::sync_w ...
- 《剑指Offer》第二章(一)题3-8
为春招实习做准备,记录一下<剑指Offer>里面的面试题 第二章 面试题3:数组之中的重复数字. 这个题吧,虽然不难,但是不知道为什么就是看了很久,可能很久没有做算法题了.最后面一句话说的 ...
- num04---模板方法模式
最近看书又遇到模板方法模式,具体是在同步器(AQS)的内容上.就顺便再来回顾下. 同步器AbstractQueuedSynchronizer(AQS)是一个抽象类.其中定义了 基本 ...
- Element ui select 同时获取value和label的值
html <el-form-item label="单位名称" prop="checkInUnitName"> <el-select v-mo ...