webkit-box-reflect,前端Css文字倒影,制作炫酷的时钟倒影效果.

最新推荐文章于 2024-10-22 08:07:33 发布

前端李十三

最新推荐文章于 2024-10-22 08:07:33 发布

阅读量507

点赞数

文章标签：前端 webkit css

本文链接：https://blog.youkuaiyun.com/weixin_64530670/article/details/132267403

版权

css倒影（-webkit-box-reflect）

webkit-box-reflect属性提供元素倒影：
三个参数：

参数1：方向：above（向上）below（向下）left（向左）right（向右）。
参数2：倒影与元素的间隔（px或者百分比）。
参数3：遮盖图片，语法跟background-image差不多。

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字倒影</title>
    <style>
        html,

        .textreflect {
            width: 600px;
            height: 300px;
            border-radius: 8px;
            margin: 100px auto;
            /* 倒影关键代码 */
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
        }

        .textreflect img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="textreflect">
        <img src="./微信图片_20230813234848.png" alt="">
    </div>


</body>

</html>