html实例Iframe with Overlay
Html 实例
html实例Iframe with Overlay

在ifrmae的上方增加overlay遮罩,6秒后淡隐掉。

html实例Iframe with Overlay


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe with Overlay</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
            opacity: 1;
            transition: opacity 1s ease; /* 渐变效果 */
        }
    </style>
</head>
<body>

<div class="iframe-container">
    <iframe src="https://www.qaqlinks.com" title="Iframe Example"></iframe>
    <div class="overlay" id="overlay"></div>
</div>

<script>
    // 6秒后淡隐overlay
    setTimeout(() => {
        const overlay = document.getElementById('overlay');
        overlay.style.opacity = '0';
    }, 10000);
</script>

</body>
</html>










重要的事情说三遍!!!
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。

(网址均来源于网络,如有侵权,请联系删除)












1. 链接直达将跳转网址: https://www.qaqlinks.com/sites/122.html

2. 网址收录时间:2024-08-31 11:18:37

3. 这是第“122”个收录网址。

如对此链接有任何疑问,可以添加以上微信,或此链接底部留言。看到会马上回复。

QaQlinks 跨境电商导航网站 声明:网站上的服务均为第三方提供,与 QAQlinks 网站无关。请用户注意甄别第三方服务质量,避免上当受骗。

(文章来源于网络,如有侵权,请联系删除)




相关导航

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注