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

html

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

效果图

微信图片_20230306230656.png

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

CSS

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

html

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

效果图

Css倒影效果 ​

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

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

Css倒影效果

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

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