以下是一個使用JavaScript實現拉幕效果的廣告代碼示例:
<!DOCTYPE html><html>
<head>
<style>
#adContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 9999;
overflow: hidden;
animation: pullCurtain 4s ease-in-out forwards;
}
@keyframes pullCurtain {
0% {
height: 100%;
}
50% {
height: 50%;
}
100% {
height: 0;
}
}
#adContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
}
</style>
</head>
<body>
<div id="adContainer">
<div id="adContent">
這里是廣告內容
</div>
</div>
<!-- 其他頁面內容 -->
<script>
// 在頁面加載完成后,移除廣告容器
window.addEventListener('load', function() {
var adContainer = document.getElementById('adContainer');
adContainer.parentNode.removeChild(adContainer);
});
</script>
</body>
</html>
這段代碼創建了一個固定定位的廣告容器(<div id="adContainer">),并使用CSS動畫(@keyframes pullCurtain)實現拉幕效果。動畫從頂部到底部的高度逐漸變化,最終將廣告內容隱藏。
在頁面加載完成后,使用JavaScript移除了廣告容器,以便在拉幕效果結束后不再顯示廣告。你可以在<div id="adContent">中修改廣告的具體內容。