天道酬勤
文本特效
滚动字幕
<marquee href="#">这是一段滚动字幕</marquee>
说明：这里添加 href="#" 是一个无效链接示例，实际使用中可替换为有效的链接地址，如 href="https://example.com" 。
<marquee direction="up" scrollamount="3" loop="3" href="https://example.com">向上滚动的字幕</marquee>
打字机效果
<!DOCTYPE html>
<html>
<body>
<div id="demo"><a href="https://example.com">这是一个可点击的区域，用于展示打字机效果</a></div>
<script>
var i = 0;
var txt = '这是一段打字机效果的文字';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter();
</script>
</body>
</html>
说明：在 div 内添加了一个链接，可根据需求修改链接地址和文字内容。
文字闪烁
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<span class="blink"><a href="https://example.com">闪烁的文字链接</a></span>
</body>
</html>
图片特效
图片轮播
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
</style>
</head>
<body>
<div class="slideshow">
<a href="https://example1.com"><img src="image1.jpg" alt="图片1"></a>
<a href="https://example2.com"><img src="image2.jpg" alt="图片2"></a>
<a href="https://example3.com"><img src="image3.jpg" alt="图片3"></a>
</div>
<script>
var images = document.querySelectorAll('.slideshow img');
var currentIndex = 0;
function showNextImage() {
images[currentIndex].style.opacity = 0;
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].style.opacity = 1;
setTimeout(showNextImage, 3000);
}
showNextImage();
</script>
</body>
</html>
说明：为每张图片添加了链接，可根据实际情况修改链接地址。
图片放大特效
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.5s;
}
.image-container:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="image-container">
<a href="https://example.com"><img src="image.jpg" alt="图片"></a>
</div>
</body>
</html>
鼠标特效
鼠标跟随文字
<!DOCTYPE html>
<html>
<body>
<span id="mouse-follower"><a href="https://example.com">跟随鼠标的文字链接</a></span>
<script>
document.addEventListener('mousemove', function (e) {
var follower = document.getElementById('mouse-follower');
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
});
</script>
</body>
</html>
鼠标悬停图片切换
<!DOCTYPE html>
<html>
<head>
<style>
.image-switch {
width: 200px;
height: 200px;
}
.image-switch img {
width: 100%;
height: 100%;
display: none;
}
.image-switch:hover img:first-child {
display: none;
}
.image-switch:hover img:last-child {
display: block;
}
</style>
</head>
<body>
<div class="image-switch">
<a href="https://example1.com"><img src="image1.jpg" alt="图片1"></a>
<a href="https://example2.com"><img src="image2.jpg" alt="图片2"></a>
</div>
</body>
</html>
背景特效
渐变背景
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(to bottom right, #ff0000, #0000ff);
}
</style>
</head>
<body>
<a href="https://example.com">在渐变背景上的链接</a>
</body>
</html>
动态背景
<!DOCTYPE html>
<head>
<title>动态背景特效</title>
<style>
body {
background-color: #000;
}
</style>
</head>
<body>
<a href="https://example.com">在动态背景上的链接</a>
<script>
setInterval(function () {
document.body.style.backgroundColor = getRandomColor();
}, 1000);
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
窗口特效
弹出窗口
<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="javascript:window.open('https://www.example.com', 'newwindow', 'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0, width=400,height=300');">打开新窗口</a>
</body>
</html>
说明：原代码中的 href="#" 是为了使链接可点击触发 onclick 事件，这里保留其原有功能。如果希望链接有实际跳转功能，可在新窗口打开后再跳转到其他页面，例如修改 onclick 函数为：
<a href="https://anotherpage.com" onclick="javascript:window.open('https://www.example.com', 'newwindow', 'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0, width=400,height=300'); return false;">打开新窗口并跳转到另一页面</a>
这里 return false; 用于阻止链接默认的跳转行为，先执行弹出新窗口操作。
定时关闭窗口
<!DOCTYPE html>
<html>
<head>
<script>
function closeit() {
setTimeout("self.close()", 10000)
}
</script>
</head>
<body onload="closeit()">
</body>
</html>
说明：由于此功能主要是定时关闭当前窗口， href 在此处通常无实际用途。若有特殊需求，可添加链接并结合其他逻辑实现更复杂的功能。PC端手机端自适应图片广告代码:+图片右下角带“广告”小字
图片广告HTML： CSS代码（放入上面HTML代码<style> /* 这里将包含CSS样式，请将其放在<style>标签内 */ </style> ： 以下是修改后的 CSS 代码，可满足电脑端显示不变，手机端不溢出窗口且同列的图片分列显示的需求：： 代码解释：.ad-container：box-sizing: border-box;：确保元素的宽度包含边框和内边距，避免元素因边框和内边距超出容器宽度。.small-ads：gap: 10px;：设置一个统一的图片间距，这个间距会应用于电脑端和手机端，你可以根据需要调整其大小。.small-ad-row：flex-direction: column;：在手机端将小图行的排列方式改为列排列，使同列图片分列显示。margin-bottom: 10px;：设置手机端小图行之间的间距，可根据需要调整。媒体查询 @media screen and (min-width: 768px)：对于电脑端（屏幕宽度大于等于 768px）：small-ad-row：将 flex-direction 改为 row，使小图行的排列方式为行排列。margin-bottom: 2px;：设置电脑端小图行之间的间距，可根据需要调整。small-ad：将 flex 属性设置为 0 0 calc(50%…