案例-光影特效

彩色投影

• 方式一：
  • 给父元素添加

    position: relative;
    background: '';

  • 给子元素添加

    position: absolute;
    background:inherit; 
    filter: blur(10px) brightness(80%) opacity(0.8); 
    z-index: -1;

• 方式二：使用 box-shadow, 父元素直接使用

  box-shadow: 0 3px 12px rgba(0, 173, 181, 0.8);

• 方式一示例：

  .father {
    position: relative;
    background: #bfa;
    width: 400px;
    height: 400px;
  }
  .children {
    position: absolute;
    width: 500px;
    height: 500px;
    background: inherit;
    filter: blur(10px) brightness(80%) opacity(0.8);
    z-index: -1;
  }
  
  <div class="father">
  	<div class="children"></div>
  </div>

倒影

• 方式一：使用-webkit-box-reflect 属性(除 IE 和火狐都可用)
• 方式二：用伪元素将父元素复制一份在 transform 倒转一下位置
• 示例：基于方式一

  img {
  	position: absolute;
  	height: 200px;
  	width: 140px;
  	box-shadow: 0 0 8px #fff;
  	transform-origin: center;
  	-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); // 倒影渐变
  }

玻璃的反光效果

• 解析：
  • 首先先放一张图在最底层，并设置相对定位
  • 创建一个空的容器并定位到与图片的位置大小一致
  • 给这个空容器添加伪类，创建出一个 45deg 的半透明条状，并执行动画
• 示例：以下写法基于 react + sass + tailwindcss

  import React from 'react'
  import { memo } from 'react'
  import "./index.scss"
  
  const Permissions = memo(() => {
  	return< div>
  	<img src="asset/image/bg-3.jpg" className="relative w-[900px] h-[600px]" alt="a cat"/>
  	<div className="pili"></div>
  	</div>
  })
  
  .pili {
    overflow: hidden;
    transition-duration: .5s;
    width: 900px;
    height: 600px;
    position:absolute;
    top: 24px;
    left:24px;
  
    &::before {
      content: '';
      position: absolute;
      width: 1200px;
      height: 15px;
      background-color: rgba(255, 255, 255, .7);
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
  		-ms-transform: rotate(-45deg);
      -webkit-animation: searchLights 3s ease-in 3s infinite;
      animation: searchLights 3s ease-in 3s infinite;
    }
    @keyframes searchLights {
      0% {
        left: -300px;
        top:-150px;
      }
      to {
        left:400px;
        top:1600px
      }
    }
  }

毛玻璃

关键：使用 backdro-filter: blur(5px); 数值越大越模糊

• 示例：

  .maoboli {
  	overflow: hidden;
  	transition-duration: 0.5s;
  	width: 900px;
  	height: 600px;
  	position: absolute;
  	top: 0;
  	left: 0;
  	backdrop-filter: blur(10px);
  }