WEB小项目——鼠标划入丝滑显示下划线
目录
概要
代码展示
技术细节
小结
概要
为了提供用户在页面时划入文本的提醒和简单的动画效果来丰富体验
代码展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.title{color: black;line-height: 2;}
.title span{background:linear-gradient(to right,rgb(8, 8, 8),rgb(4, 8, 4)) no-repeat rightbottom;background-size: 0 2px;transition: background-size 0.8s;
}
.title span:hover{background-position:left bottom;background-size:100% 2px;
}
span{font-family: Arno Pro, serif;font-size: 1.4rem;line-height: 1.4;margin: 0;}span.credits {font-style: italic;text-indent: 0 !important;margin: 1rem 0;}span a {font-weight: bolder;color: #000;text-decoration: none;}</style>
<body><h2 class="title"> <span>由于缺乏更多的研究，围绕流浪猫，各方虽有不同的观察和建议，但短期内难求公论。但采访中，从学者到动物保护人士，大家都不得不承认，流浪猫和投喂它们的城市居民正在逐渐改变城市的自然生态。对流浪动物应有更多研究、寻求管理办法的呼声，比以往更为迫切。李天娇是上海市的一位救助流浪猫志愿者。她向南方周末记者回忆，早些年，上海市民养猫，多是为了让猫在弄堂里抓老鼠。近年来，随着城市不断拆迁扩大，城市里出现了越来越多的流浪猫，它们随着人类的脚步，不断拓展着活动领地。爱猫的上海市民张丽娜对此印象尤其深刻。最初，她在自己的院子里喂养了一只流浪猫，但很快，第二只流浪猫也来了。三个月不到，两只小母猫生下了三只小猫。张丽娜记得很清楚，小猫出生的三个月零十七天，一只猫妈妈又生了一窝小猫……在不到一年时间里，她最多同时喂养过近10只猫。王放和宋大昭也观察到，当流浪猫获得了充足的食物后，繁殖速度就会迅速增加。那段时间，张丽娜忙个不停，“我只能忙着把小猫送人，不停给庭院做清理。”而城市中，像张丽娜一样喂养流浪猫的人并不是少数，张丽娜告诉南方周末记者，除了自己，小区里还有固定几家人喜欢在前后院里投喂流浪猫。“最多的一家在自己的院前院后喂养了差不多30只。”这些城市居民，除了一定的经济负担和打扫卫生，还常担心邻里之间会出现矛盾。张丽娜发现，对小区多数居民而言，关心流浪猫的家庭还是少数，“有的猫翻垃圾桶，会有邻居担心卫生隐患，还会出现流浪猫半夜嚎叫扰民的情况。”此外确实发生过流浪猫吃鸟的情况，比如养鸽子的人家发现自己的鸽子被猫吃了。而王放对于城市野生动物的研究，从另一个侧面揭示流浪猫对城市野生动物的影响。近二十年来，王放一直在研究野生动物如何应对急速变化的生态系统，其中很重要的一部分是城市野生动物——野生动物和城市的人如何共融？发生了什么改变？王放告诉南方周末记者，这些年，出现在红外触发相机中的城市野生动物种类很多，如黄鼠狼、老鼠、刺猬、貉、豹猫、獐、白头鹎、斑鸠等，“但流浪猫出现的频率，是压倒性的。”当城市居民投放大量猫粮喂养流浪猫，王放发现，黄鼠狼、老鼠、貉等这类野生动物，逐渐开始像流浪猫一样吃人类投喂的猫粮，并且因为人类活动改变自己的生活习性。新出生的小猫学会拉帮结伙地觅食、不同小区之间的流浪猫还会结对打架，鸟儿开始翻检垃圾桶里的生活垃圾找吃的，夜间活动的貉会在白天出来觅食……“貉本来是一种很害羞的动物，但我们发现它们一旦吃过猫粮这种蛋白质含量较高、还能够轻易获得的食物后，为了获得它们，就会变得更加亲人，甚至伤人”。</span></h2></body>
</html>
技术细节
1、基础样式:
.title span:hover {background-position: left bottom;background-size: 100% 2px;
}
background: 定义一个从右到左的线性渐变背景，颜色从rgb(8, 8, 8)到rgb(4, 8, 4)。no-repeat right bottom: 背景图像不重复，并且定位在右下角。background-size: 0 2px: 背景大小初始为0水平方向和2px垂直方向，这意味着背景只显示在右下角的一条细线上。
2、过渡效果:
.title span:hover {background-position: left bottom;background-size: 100% 2px;
}
background-position: left bottom: 当鼠标悬停时，背景位置移动到左下角。background-size: 100% 2px: 背景大小变为100%水平方向和2px垂直方向，这意味着背景渐变从右下角扩展到左下角。
3、过渡时间:
transition: background-size 0.8s;
transition: 规定了背景大小变化的过渡时间为0.8秒，使得背景渐变的扩展过程平滑。
小结
本次分享通过 CSS 的 linear-gradient 和 transition 属性实现了渐变背景的动画效果。当鼠标悬停在 span 元素上时，背景渐变会从右下角逐渐扩展到左下角，形成一个动态的视觉效果。
感谢阅览