CSS文字反光效果

萧寂173

已于 2025-02-25 10:31:55 修改

阅读量295

点赞数 3

分类专栏： css 文章标签： css 前端 javascript

于 2025-02-25 10:22:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/145845975

版权

css 专栏收录该内容

27 篇文章

订阅专栏

<!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>
        .hyp2div{
            background-color: #f1e5f9;
            border-radius: 50%;
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hyp2{
            font-weight: bold;
            font-size: 20px;
            /* 微信小程序需要添加-webkit-前缀才生效 */
            /* -webkit-background-image: linear-gradient(to right, #9B499A, #EC87EC, #9B499A); */
            background-image: linear-gradient(to right, #9B499A, #EC87EC, #9B499A);
            color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body>
    <div class="hyp2div">
        <div class="hyp2">你好</div>
    </div>
</body>
</html>