【日常记录】【CSS】css下划线动画-编程知识

【日常记录】【CSS】css下划线动画

文章目录

- 1、效果
- 2、思路
- 3、代码

1、效果

在这里插入图片描述

2、思路

整体可以用 背景来做
线：可以用 渐变 配合 background-size 、 background-position 、background-repeat
正向动画：可以不断追加 background-size x 轴的大小来控制，当鼠标移入的时候，不断追加 background-size X轴大小
反向动画：可以在鼠标移出的时候，吧 background-position 的 x 轴设置成 right ，先从右边体现

3、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.underline {line-height: 2;background: linear-gradient(to right, red, red);background-size: 0 2px;background-repeat: no-repeat;background-position: right bottom;transition: background-size 0.8s;}div span:hover {background-position: left bottom;background-size: 100% 2px;}</style>
</head><body><div><span class="underline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationem fugitrepudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquamarchitectoaliquam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationemfugitrepudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquamarchitectoaliquam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationemfugitrepudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquamarchitectoaliquam.</span></div>
</body></html>