How to make a zoom in function when the website opens-CodePudding

How can i make a code where if you open my webpage then this happens: https://www.youtube.com/watch?v=tGsKzZtRwxw using css?

But what i want instead is for the logo to first zoom in (faster, maybe 5 sec until the animation is over) to show the logo, then it goes to the top left where it stays there when you browse through my page. It is for a school project with the theme star wars.

CodePudding user response：

You can try the CSS zoom rule. I've never really tried it, but in theory setting a css rule like the following might do what you want:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

Note: It just makes everything on the page bigger