Готовый HTML CSS ниже, а так же лого PNG
Кто знает подскажите пожалуйста буду благодарен!
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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="gc-animation-logo">
<div class="gc-animation-logo__body">
<img src="images/logo.svg" alt="" class="logo logoAnimation">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () =>
{
document.querySelector('.gc-animation-logo__body').classList.add('gc-transition');
setTimeout( () =>
{
document.querySelector('.gc-animation-logo').classList.add('active');
}, 1000 );
});
</script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Amatic SC', cursive;
overflow: hidden;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>>> Start: Logo Animation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.gc-animation-logo
{
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
background-color: #fff;
inset: 0;
}
.gc-animation-logo__body.gc-transition
{
transition: transform 1.5s ease-in-out, top .5s ease-in-out;
}
.gc-animation-logo__body
{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
transform: rotateX(-50deg) scale3d(5, 5, 1) translate(0, 0%);
}
.gc-animation-logo.active .gc-animation-logo__body
{
transform: rotateX(0deg) scale3d(.4, .4, 1) translate(0, -50%);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<<< Close: Logo Animation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
PNG LOGO
Простой
