前几日，产品要求后端实现一个将文字转为gif图片，要用于官网首页广告栏。我想这不是前段就能实现吗，怎么还要求后端生成gif，然后前段在展示。你确定招的前段不是对手公司过来的卧底？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text GIF Animation</title>
<style>
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.text-box {
display: none;
width: 300px;
height: 100px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 0 10px;
padding: 10px;
text-align: center;
}
.active {
display: block;
}
button {
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="text-container">
<div class="text-box" id="text1">文本1</div>
<div class="text-box" id="text2">文本2</div>
<div class="text-box" id="text3">文本3</div>
<button id="skipBtn">跳过</button>
</div>
<script>
// JavaScript 代码
var currentIndex = 0;
var texts = [document.getElementById('text1'), document.getElementById('text2'), document.getElementById('text3')];
var skipButton = document.getElementById('skipBtn');
var animationInterval;
function startAnimation() {
texts[currentIndex].classList.add('active');
animationInterval = setInterval(function() {
texts[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % texts.length;
texts[currentIndex].classList.add('active');
}, 2000); // 每2秒切换到下一个文本
}
skipButton.addEventListener('click', function() {
clearInterval(animationInterval); // 清除动画间隔
currentIndex = texts.length - 1; // 直接跳到最后一个文本
texts[currentIndex].classList.add('active');
});
// 开始动画
startAnimation();
</script>
</body>
</html>
