html文字动态特效代码
时间: 2024-10-11 19:14:51 浏览: 27
漂亮的动态飘花灯笼特效代码
HTML 文字动态特效通常通过 CSS 和 JavaScript 来实现。以下是一些常见的例子:
1. **轮播效果**:可以利用 `<marquee>` 标签创建滚动的文字效果,虽然现代浏览器已弃用这个标签,但可以用 JavaScript 或 jQuery 实现类似功能。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.marquee {
width: 200px;
overflow: hidden;
white-space: nowrap;
animation: slide 5s linear infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100%);
}
</style>
</head>
<body>
<div class="marquee">这是一个动态滚动的文字。</div>
</body>
</html>
```
2. **悬停效果**:CSS 的 `transition` 或 `animation` 属性可以为文字添加淡入淡出、放大缩小等动画效果,当鼠标悬停时触发。
```css
.hover-effect {
transition: color 0.5s ease;
}
.hover-effect:hover {
color: red;
}
```
3. **响应式文字**:JavaScript 可以用于检测屏幕大小并改变文字显示样式,如字体大小、行高等。
```javascript
window.addEventListener('resize', function() {
var textElement = document.getElementById('responsive-text');
if (window.innerWidth < 600) {
textElement.style.fontSize = '14px';
} else {
textElement.style.fontSize = '20px';
}
});
```
阅读全文