用 html+css+js做一个玫瑰花
时间: 2024-01-30 19:02:34 浏览: 50
好的,以下是一个简单的用 HTML、CSS 和 JavaScript 制作玫瑰花的示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>玫瑰花</title>
<style>
.rose {
position: relative;
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(-45deg);
}
.rose:before {
content: "";
position: absolute;
top: -25px;
left: -25px;
width: 0;
height: 0;
border-top: 25px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(45deg);
}
.rose:after {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-top: 25px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="rose"></div>
<script>
// 玫瑰花的动画效果
let rose = document.querySelector('.rose');
let angle = 0;
setInterval(function() {
angle += 1;
rose.style.transform = 'rotate(' + angle + 'deg)';
}, 10);
</script>
</body>
</html>
```
CSS 中 `.rose` 类定义了玫瑰花的形状,通过三条边框组成一个正方形,再通过 `transform: rotate()` 属性旋转 45 度得到玫瑰花的形状。`.rose:before` 和 `.rose:after` 为伪元素,分别表示玫瑰花的上半部分和下半部分,通过类似的方式得到。JavaScript 中通过 `setInterval` 定时器来实现玫瑰花的动画效果。
在浏览器中打开该 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)