iframe 标签(用于嵌套网页)及loading加载动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Loading Animation Example</title>
<style>
.loading-animation {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: lightgray;
overflow: hidden;
}
.loading-animation iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="loading-animation">
<iframe src="https://example.com" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>这个例子中，.loading-animation 类定义了一个占位符的作用，通过 padding-bottom 属性来保持宽高比，并且设置了背景色。在 .loading-animation 内部的 iframe 标签通过 position: absolute 定位，覆盖在占位符上，当外部页面加载完成时，iframe 会加载目标页面，从而呈现出内嵌的网页内容。这样做既能保持良好的用户体验，也避免了因直接显示空白 iframe 引起的页面跳动。
评论已关闭