在php制作的网页中:设计一个div,div模拟霓虹灯效果,四种颜色闪烁,红黄蓝紫,div中有文字:欢迎来到留言板,文字居中,文字较大
时间: 2024-03-24 09:36:03 浏览: 112
好的,以下是代码实现:
```html
<div id="neon">
<h1>欢迎来到留言板</h1>
</div>
```
```css
#neon {
background-color: black;
padding: 20px;
text-align: center;
}
#neon h1 {
font-size: 40px;
color: white;
animation: neon 1s ease-in-out infinite alternate;
}
@keyframes neon {
0% {
color: red;
text-shadow: 0 0 10px red;
}
25% {
color: yellow;
text-shadow: 0 0 10px yellow;
}
50% {
color: blue;
text-shadow: 0 0 10px blue;
}
75% {
color: purple;
text-shadow: 0 0 10px purple;
}
100% {
color: red;
text-shadow: 0 0 10px red;
}
}
```
这个代码会创建一个黑色背景的 `<div>` ,里面有一个带有霓虹灯效果的大标题 "欢迎来到留言板"。标题会循环闪烁四种颜色,红色、黄色、蓝色和紫色,并且这四种颜色都有一个10像素的文本阴影。
阅读全文