CSS实现倒影效果

Css倒影效果

实现倒影的两种方式

第一种方式 使用 -webkit-box-reflect

简单粗暴,但是自定义度小

-webkit-box-reflect

属性值	介绍
below above left right	上下左右 阴影投射的四个方向
px	投影距离元素的边距
linear-gradient(transparent, rgba(0, 0, 0, .5));	投影的虚实，可叠加一层蒙版控制透明度

CSS

 		body {
            background-color: #000000;
            display: flex;
            justify-content: center;
            gap:100px
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
        }

        img {
            width: 50%;
            -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 1));
        }

Html

    <div class="box"></div>
    <img src="./010.jpg" alt="">

效果图

第二种方式 采用伪元素旋转

CSS

      p {
            position: relative;
            font-size: 50px;
        }
        p::before {
            content: attr(content);
            position: absolute;
            inset: 0;
            transform: rotatex(180deg) translatey(20px);
            transform-origin: 50% 100%;
            filter: blur(3px) brightness(1.5);
        }

Html

<p content="HELLOW">HELLOW</p>

效果图