用html+css画一个星星
时间: 2023-10-27 16:07:23 浏览: 118
好的,下面是html和css代码,可以在浏览器中查看:
HTML代码:
```html
<div class="star"></div>
```
CSS代码:
```css
.star {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 17.3px 10px;
border-color: transparent transparent #f8ce0b transparent;
transform: rotate(30deg);
}
```
解释一下上述代码:
1. 在HTML中用一个div元素来表示星星,类名为“star”。
2. 在CSS中设置了该div元素的样式:
- 宽度和高度都为0,因为我们需要用边框来画出星星。
- 设置边框样式为实线(solid)。
- 设置边框宽度,上方(第一个值)为0,因为我们不需要画上方的边框;左右两侧(第二个和第四个值)为10个像素,大小可以自己调整;底部(第三个值)为正三角形的高度,我们用正三角形来表示星星的底部,大小为10像素可以自己调整。
- 设置边框颜色,上方为透明(transparent),两侧也为透明;底部为黄色(#f8ce0b),自己可以根据需要修改。
- 使用transform属性来旋转星星,这里设置为30度,如果需要旋转到其他角度可以修改。
这样就完成了一个简单的星星,保存代码并在浏览器中打开即可看到效果。
相关问题
使用画布和css画一个星星闪烁的背景图
好的,下面是一个使用画布和CSS实现星星闪烁的背景图的示例代码:
HTML:
```
<canvas id="stars"></canvas>
<div class="background"></div>
```
CSS:
```
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#stars {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
}
```
JavaScript:
```
var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var stars = [];
for (var i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5 + 0.5,
alpha: Math.random() * 0.5 + 0.5,
direction: Math.random() < 0.5 ? -1 : 1
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255,' + star.alpha + ')';
ctx.fill();
star.x += star.direction * 0.1;
if (star.x < 0 || star.x > canvas.width) {
star.direction = -star.direction;
}
}
requestAnimationFrame(draw);
}
draw();
```
这个代码将创建一个画布和一个半透明的黑色背景,并在画布上绘制100个随机闪烁的星星。星星将根据随机方向以0.1的速度移动,当星星到达画布的边缘时将改变方向。通过动画循环绘制星星,使其闪烁。
请注意,此示例代码的效果可能因浏览器和设备而异,具体效果可能需要根据您的具体需求进行调整。
html+css实现流星雨功能代码
以下是一个简单的HTML和CSS实现流星雨效果的示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>流星雨效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</body>
</html>
```
CSS:
```
body {
background-color: #000;
}
.star {
position: absolute;
width: 2px;
height: 10px;
background-color: #fff;
box-shadow: 0 0 2px #fff;
animation: shooting-star 1s ease-in-out infinite;
}
.star:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0.5s;
}
.star:nth-child(2) {
top: 50%;
left: 20%;
animation-delay: 1.5s;
}
.star:nth-child(3) {
top: 80%;
left: 30%;
animation-delay: 2.5s;
}
.star:nth-child(4) {
top: 10%;
left: 40%;
animation-delay: 3.5s;
}
.star:nth-child(5) {
top: 40%;
left: 50%;
animation-delay: 4.5s;
}
.star:nth-child(6) {
top: 70%;
left: 60%;
animation-delay: 5.5s;
}
.star:nth-child(7) {
top: 25%;
left: 70%;
animation-delay: 6.5s;
}
.star:nth-child(8) {
top: 60%;
left: 80%;
animation-delay: 7.5s;
}
.star:nth-child(9) {
top: 90%;
left: 90%;
animation-delay: 8.5s;
}
.star:nth-child(10) {
top: 15%;
left: 80%;
animation-delay: 9.5s;
}
@keyframes shooting-star {
0% {
transform: translateX(0) translateY(0);
opacity: 1;
}
100% {
transform: translateX(500px) translateY(500px);
opacity: 0;
}
}
```
这段代码会在页面上生成10个星星元素,并使用CSS动画实现流星雨效果。每个星星都有不同的起始位置和延迟时间,使得它们看起来像是从不同的方向飞来。动画的关键帧使用transform属性在水平和垂直方向上移动星星元素,并在100%时将其透明度设置为0,使其消失。
相关推荐
![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)