案例-光影特效

彩色投影

• 方式一：
  • 给父元素添加 相加定位 和 背景
  • 给子元素添加 绝对定位 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);
}