Using SVG
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Svg se animation how matlab kaise kare.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300;1,400;1,500&display=swap');
body, html
{
height: 100%;
margin: 0;
color: #fff;
font-family: 'Montserrat', sans-serif;
animation: animate 3s linear;
}
@keyframes animate
{
0%
{
opacity: 0.1;
transform: rotate3d(1, 1, 1, 360deg);
}
50%
{
opacity: 0.5;
}
100%
{
opacity: 0.1;
}
}
a
{
color: #000;
text-decoration: none;
}
body
{
background: url('bg.svg') no-repeat;
background-size: cover;
}
#left
{
position: absolute;
top: 20%;
width: 13%;
height: 50%;
right: 0;
z-index: 1;
}
#right
{
position: absolute;
top: 60%;
width: 7%;
height: 50%;
left: 0;
}
nav
{
padding: 50px;
}
nav ul
{
list-style-type: none;
float: right;
}
nav ul li
{
float: left;
}
nav ul li a
{
color: #000;
padding: 0 30px;
font-size: 25px;
}
nav ul li a:hover
{
background: linear-gradient(#3fffec,#2aa9ff);
}
#logo
{
font-size: 40px;
}
.container
{
text-align: center;
width: 60%;
margin: 110px auto;
}
h1
{
font-size: 3.5em;
}
.container p
{
font-size: 1.3em;
line-height: 1.4em;
}
.element {
/* height: 250px;*/
width: 100%;
margin: 0 auto;
background-color: transparent;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
background: url(left.svg);
height: 3vh;
display: flex;
}
@keyframes stretch {
0% {
transform: scale(0);
background-color: transparent;
border-radius: 100%;
left: 0;
}
100% {
transform: scale(1);
background-color: transparent;
}
}
</style>
</head>
<body>
<div class="element"></div>
<img src="left.svg" id="left">
<img src="right.svg" id="right">
<nav>
<a href="#" id="logo">awesomecompany</a>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">services</a></li>
</ul>
<div class="container">
<h1>My snazzy headline.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
?
</p>
</div>
</nav>
</body>
</html>