CSS 字体交互特效

最新推荐文章于 2022-04-11 23:30:08 发布

weixin_30446197

最新推荐文章于 2022-04-11 23:30:08 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/potatog/p/9298061.html

版权

一、鼠标悬浮时，字体颜色从左到右依次变化
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>box-size</title>
    <style type="text/css">
        h1{
            letter-spacing: 100px;/*必要*/
            position: relative;/*必要*/
            cursor: pointer;
            list-style-type: none;
        }
        h1:before{
            content: attr(title);/*必要*/
            width: 0%;/*必要*/
            position: absolute;/*必要*/
            z-index: 2;/*必要*/
            color: #e49d99;
            white-space: nowrap;
            overflow: hidden;/*必要*/
            transition: 3s;/*必要*/
        }
        h1:hover:before{
            width: 100%;/*必要*/
        }
    </style>
</head>
<body>
    <h1 title="ABCDABCD">ABCDABCDE</h1>
</body>
</html>

转载于:https://www.cnblogs.com/potatog/p/9298061.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30446197

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 字体交互特效

一、鼠标悬浮时，字体颜色从左到右依次变化<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>box-size</title> <style type="text/css"> h1{...
复制链接

扫一扫