html浪漫星空特效代码
时间: 2023-10-27 19:05:43 浏览: 133
以下是一个简单的 HTML 浪漫星空特效代码,你可以在网页中嵌入这段代码来实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>浪漫星空特效</title>
<style type="text/css">
body {
background-color: #000;
background-image: url('https://i.imgur.com/6XJZpJj.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-blur: 10px;
animation: stars 20s ease-in-out infinite;
}
@keyframes stars {
0% {
background-image: url('https://i.imgur.com/6XJZpJj.jpg');
}
25% {
background-image: url('https://i.imgur.com/5zvLQ9z.jpg');
}
50% {
background-image: url('https://i.imgur.com/7wZ8t3O.jpg');
}
75% {
background-image: url('https://i.imgur.com/5zvLQ9z.jpg');
}
100% {
background-image: url('https://i.imgur.com/6XJZpJj.jpg');
}
}
</style>
</head>
<body>
</body>
</html>
```
这段代码会在页面背景中循环播放四张星空图片,同时添加了模糊效果和动画效果,让页面看起来更加浪漫。
相关推荐
![](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)