css3给盒子加一个白色闪光效果（超简单）

阅读：评论：0

要实现的效果如下图：

操作思路：

创建一个div，设置宽高，里面创建一个子盒子（不用伪元素也行）
用子绝父相子盒子定位到父盒子左侧
给子盒子用2d转换和背景的线性渐变，创造闪光的形状
设置:hover效果，使子盒子从父盒子左边移动到父盒子右边

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>白色闪光效果</title><style>div {float: left;position: relative;margin: 100px 20px;width: 200px;height: 160px;/* 给父盒子添加溢出隐藏 */overflow: hidden;}div:nth-child(1) {background-color: #3cf;}div:nth-child(2) {background-color: #88f;}div:nth-child(3) {background-color: #f88;}div:nth-child(4) {background-color: #fc3;}div::after {/* 将子盒子定位到父盒子左边（被隐藏） */position: absolute;left: -120%;top: 0;content: "";width: 100%;height: 100%;/* 让子盒子变形为倾斜 */transform: skew(-30deg);/* 给子盒子一个透明~白色~透明的线性渐变 */background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(255,255,255,.5),rgba(0,0,0,0));}div:hover::after {/* 将子盒子定位到父盒子右边 */left: 120%;/* 添加过渡属性，让移动可见 */transition: all .4s;}</style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>
</html>