星光璀璨的html代码
时间: 2023-09-27 21:06:49 浏览: 52
以下是一个简单的 HTML 代码,可以让文本在背景中闪烁,产生星光璀璨的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>星光璀璨</title>
<style type="text/css">
body {
background-color: black; /* 背景颜色为黑色 */
color: white; /* 文本颜色为白色 */
animation: blink 1s infinite; /* 指定闪烁动画 */
}
@keyframes blink {
from { opacity: 1.0; } /* 初始状态为不透明 */
to { opacity: 0.0; } /* 结束状态为透明 */
}
</style>
</head>
<body>
<h1>星光璀璨</h1>
<p>这是一个星光璀璨的效果,文本在黑色背景中闪烁。</p>
</body>
</html>
```
在上面的代码中,我们首先设置了背景颜色为黑色,文本颜色为白色。然后使用 CSS 的 `@keyframes` 属性定义了一个 `blink` 动画,让文本从不透明到透明的过程中闪烁。最后在 `body` 标签中指定了闪烁动画,让整个页面都产生星光璀璨的效果。
相关问题
高科技星光闪烁的html代码
下面是一个简单的HTML和CSS代码示例,可以实现高科技星光闪烁的效果:
HTML代码:
```html
<div class="stars"></div>
```
CSS代码:
```css
.stars {
height: 100vh;
background: #000;
position: relative;
}
.stars:before {
content: "";
display: block;
position: absolute;
top: -200px;
left: -200px;
width: 400px;
height: 400px;
border-radius: 50%;
box-shadow: 0 0 50px #fff, 0 0 100px #fff, 0 0 150px #fff, 0 0 200px #0ff, 0 0 300px #0ff, 0 0 400px #0ff, 0 0 500px #0ff, 0 0 750px #0ff;
animation: pulse 10s linear infinite;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
```
这个代码片段使用CSS的box-shadow属性和动画来创建一个星光闪烁的效果。您可以将其复制并粘贴到HTML文件中,然后在浏览器中查看效果。请注意,这只是一个简单的示例,您可以根据需要进行更改和调整。
html5 canvas全屏酷炫星光闪烁3D视差背景动画特效html代码
以下是一个基于 HTML5 Canvas 的全屏酷炫星光闪烁 3D 视差背景动画特效的 HTML 代码:
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Star Field</title>
<style>
canvas {
background-color: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
stars = [],
particles = [],
maxStars = 1300,
maxParticles = 100;
// 创建星星
for (var i = 0; i < maxStars; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5,
depth: Math.random() * 2000 + 500
});
}
// 创建粒子
function emitParticle() {
if (particles.length < maxParticles) {
var particle = {
x: canvas.width / 2,
y: canvas.height / 2,
vx: Math.random() * 2 - 1,
vy: Math.random() * 2 - 1,
radius: Math.random() * 2 + 2,
alpha: Math.random() * 0.5 + 0.5,
life: Math.random() * 200 + 100
};
particles.push(particle);
}
}
// 更新粒子
function updateParticles() {
particles.forEach(function(particle, index) {
particle.x += particle.vx;
particle.y += particle.vy;
particle.life--;
particle.alpha -= 0.01;
if (particle.life <= 0 || particle.alpha <= 0) {
particles.splice(index, 1);
}
});
}
// 绘制星星
function drawStar(star) {
var x = (star.x - canvas.width / 2) * (star.depth / canvas.width),
y = (star.y - canvas.height / 2) * (star.depth / canvas.width),
radius = star.radius * (star.depth / canvas.width);
context.beginPath();
context.arc(x + canvas.width / 2, y + canvas.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = '#fff';
context.fill();
}
// 绘制粒子
function drawParticle(particle) {
context.beginPath();
context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 255, 255, ' + particle.alpha + ')';
context.fill();
}
// 绘制
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制星星
stars.forEach(function(star) {
drawStar(star);
});
// 绘制粒子
particles.forEach(function(particle) {
drawParticle(particle);
});
}
// 循环
function loop() {
emitParticle();
updateParticles();
draw();
requestAnimationFrame(loop);
}
// 初始化画布
function initCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
}
// 初始化
function init() {
initCanvas();
loop();
}
// 执行初始化
init();
</script>
</body>
</html>
```
这段代码创建了一个全屏的 Canvas 画布,并在其中绘制了星星和粒子。通过调整粒子的数量和大小,以及星星的深度和大小,可以得到不同的效果。
相关推荐
![](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)