静态图片怎么用css 呈现动态波纹效果
时间: 2023-08-08 11:13:19 浏览: 95
可以使用CSS3中的animation动画和伪元素来实现静态图片的波纹效果。具体实现方法如下:
1. 首先在HTML中添加一张静态图片,例如:
```
<div class="image"></div>
```
2. 在CSS中对该图片进行样式设置,包括宽高、背景图片等:
```
.image {
width: 200px;
height: 200px;
background-image: url("your-image-url");
background-size: cover;
}
```
3. 使用伪元素:before来创建一个覆盖在图片上的半透明层,并对其进行样式设置:
```
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
```
4. 使用animation动画来创建波纹效果。为了使波纹效果更加真实,我们可以使用多个波纹动画叠加在一起。创建多个animation动画的关键是设置不同的delay值,以便让它们在不同的时间点启动。
```
.image:before {
...
animation: ripple 2s linear infinite;
animation-delay: -1s, 0s, 1s;
}
@keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}
```
5. 最后,使用transform属性来添加一个微小的缩放效果,使波纹更加自然。
```
.image:before {
...
transform: scale(1);
}
@keyframes ripple {
0% {
transform: scale(1);
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
```
完整的代码如下:
```
<div class="image"></div>
.image {
position: relative;
width: 200px;
height: 200px;
background-image: url("your-image-url");
background-size: cover;
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
animation: ripple 2s linear infinite;
animation-delay: -1s, 0s, 1s;
transform: scale(1);
}
@keyframes ripple {
0% {
transform: scale(1);
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)