要使用CSS3创建一个模仿相机快门闪动的效果，你可以使用@keyframes动画结合animation属性。下面是一个简单的示例，展示了如何实现这种效果：
- HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera Flash Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flash"></div>
</body>
</html>
- CSS样式和动画 (
styles.css)：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
.flash {
width: 200px;
height: 200px;
background-color: white;
opacity: 0;
border-radius: 50%;
animation: flashAnimation 1s infinite;
}
@keyframes flashAnimation {
0%, 100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1);
}
}
在这个示例中：
- 我们创建了一个
div元素，用于表示快门的闪光。 - 使用CSS，我们为这个
div设置了一个初始的opacity为0（完全透明），这样它在动画开始时是不可见的。 - 我们使用
@keyframes定义了一个名为flashAnimation的动画。这个动画在0%和100%的关键帧处设置opacity为0，并且缩放（transform: scale()）元素到其原始大小的一半。在50%的关键帧处，我们将opacity设置为1（完全不透明），并将元素缩放到其原始大小。 - 通过将
animation属性设置为flashAnimation 1s infinite，我们将这个动画应用到div上，并使其无限循环，每次循环持续1秒。
你可以根据需要调整动画的持续时间、闪光的颜色和形状等属性，以达到你想要的效果。
标签：CSS3,opacity,动画,快门,animation,闪动,flashAnimation,div From： https://www.cnblogs.com/ai888/p/18621794