那你可以给我创作一个随机的HTML动画么
时间: 2024-04-29 21:27:02 浏览: 11
当然可以!以下是一个简单的随机HTML动画:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机HTML动画</title>
<style>
/* 定义动画关键帧 */
@keyframes animate {
0% {transform: rotate(0deg);}
25% {transform: rotate(-90deg);}
50% {transform: rotate(180deg);}
75% {transform: rotate(90deg);}
100% {transform: rotate(0deg);}
}
/* 样式设置 */
div {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation-name: animate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* 随机颜色生成器 */
.color1 {
background-color: rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)});
}
.color2 {
background-color: rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)});
}
.color3 {
background-color: rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)});
}
</style>
</head>
<body>
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
</body>
</html>
```
每个 `<div>` 元素都有一个随机的背景颜色并且都会执行一个随机动画。希望你喜欢它!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)