css3 发光
时间: 2023-07-27 10:06:01 浏览: 54
要在 CSS3 中实现发光效果,可以使用 box-shadow 属性,设置其值为 0 0 10px #fff(其中 #fff 为发光的颜色)。例如:
```
.box {
box-shadow: 0 0 10px #fff;
}
```
还可以使用 text-shadow 属性给文字添加发光效果。例如:
```
h1 {
text-shadow: 0 0 10px #fff;
}
```
相关问题
css五角心收藏点亮,CSS3 发光的五角星
好的,我了解了您的问题。下面是实现收藏点亮和发光的 CSS3 五角星的代码:
收藏点亮的五角星:
```html
<div class="star">
<input type="checkbox" id="star-cb" />
<label for="star-cb">☆</label>
</div>
```
```css
.star input[type="checkbox"] {
display: none;
}
.star label {
font-size: 50px;
color: gray;
cursor: pointer;
transition: color 0.2s;
}
.star input[type="checkbox"]:checked + label {
color: gold;
}
```
发光的五角星:
```html
<div class="glowing-star">★</div>
```
```css
.glowing-star {
font-size: 50px;
color: transparent;
text-shadow: 0 0 10px gold;
}
```
希望这些代码能对您有所帮助。
css 彩虹色发光字体
以下是使用CSS实现彩虹色发光字体的方法:
```css
@keyframes shining {
0% {
text-shadow: 0 0 10px red;
}
14% {
text-shadow: 0 0 10px orange;
}
28% {
text-shadow: 0 0 10px yellow;
}
42% {
text-shadow: 0 0 10px green;
}
57% {
text-shadow: 0 0 10px blue;
}
71% {
text-shadow: 0 0 10px indigo;
}
85% {
text-shadow: 0 0 10px violet;
}
100% {
text-shadow: 0 0 10px red;
}
}
.rainbow-text {
font-size: 24px;
font-family: Arial, sans-serif;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shining 3s linear infinite;
}
```
在HTML中使用上述CSS类名即可实现彩虹色发光字体效果:
```html
<p class="rainbow-text">Hello, World!</p>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)