css 鼠标触碰文字 文字特效
时间: 2023-07-23 10:15:00 浏览: 126
要实现鼠标触碰文字时添加文字特效,可以使用CSS的伪类选择器:hover和text-decoration属性。
首先,在CSS中定义文字的样式,例如:
```
.text {
font-size: 24px;
color: #333;
text-shadow: 1px 1px 1px #ddd;
transition: all 0.3s ease-in-out;
}
```
这里添加了一个过渡效果,使得文字特效更加平滑。
然后,使用:hover伪类选择器来为鼠标悬停时的文字添加特效,例如:
```
.text:hover {
text-decoration: underline;
color: #ff6600;
text-shadow: 1px 1px 1px #ff6600;
}
```
这里的text-decoration属性用来添加下划线特效,color属性用来改变文字颜色,text-shadow属性用来改变文字阴影颜色。
完整的CSS代码如下:
```
.text {
font-size: 24px;
color: #333;
text-shadow: 1px 1px 1px #ddd;
transition: all 0.3s ease-in-out;
}
.text:hover {
text-decoration: underline;
color: #ff6600;
text-shadow: 1px 1px 1px #ff6600;
}
```
这样,当鼠标触碰文字时,文字就会出现下划线,并且文字的颜色和阴影颜色也会发生改变,从而实现了文字特效。
阅读全文