iframe简单用法

最新推荐文章于 2025-09-29 21:49:19 发布

原创最新推荐文章于 2025-09-29 21:49:19 发布 · 6.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

经验记载专栏收录该内容

31 篇文章

订阅专栏

iframe一般用于一个网页嵌套另外一个网页

比如我这里有两个html文件

在1.html文件写上

<body>
    <iframe style="width: 100%; height: 100%" src="./2.html" frameborder="1"></iframe>
</body>

body {
    margin: 0;
    padding: 60px;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
}

意思是把同级的2.html给嵌入进来 frameborder顾名思义就是是否要边框 0为不要1为要这里我添加了边框效果如下

这时我们在2.html写点动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @keyframes move
        {
            10% {transform: translate(400px, 200px) scale(1.4) rotate(720deg);background-color: aqua;}
            50% {transform: translate(200px, 400px) scale(2) rotate(1080deg);background-color: antiquewhite;}
            70% {transform: translate(100px, 100px) scale(1) rotate(1080deg);background-color: rgb(247, 201, 142);}
        }
        .movebox{
            width: 100px;
            height: 100px;
            border-radius: 4px;
            border: 1px solid #000;
            background-color: bisque;
            animation: move 4s infinite ;
        }
    </style>
</head>
<body>
    <div class="movebox"></div>
</body>
</html>

效果如下