HTML
<div class="plane-container">
<svg xmlns="http://www.w3.org/2000/svg" class="plane" width="500" height="260" viewBox="0 0 500 260">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="142.084" y1="248.724" x2="125.305" y2="186.102">
<stop offset="0" stop-color="#B2D2E7"/>
<stop offset="1" stop-color="#AAC8DD"/>
</linearGradient>
<path fill="url(#a)" d="M141.31 181.81L100 260l76.81-50"/>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="305.58" y1="242.428" x2="242.003" y2="5.155">
<stop offset="0" stop-color="#F0F9FF"/>
<stop offset="1" stop-color="#FFF"/>
</linearGradient>
<path fill="url(#b)" d="M0 70l240 190L500 0"/>
<g>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="319.103" y1="201.292" x2="280.898" y2="58.709">
<stop offset="0" stop-color="#C8E0F0"/>
<stop offset="1" stop-color="#E9F3F9"/>
</linearGradient>
<path fill="url(#c)" d="M83.69 136.25L100 260l41.31-78.19L500 0"/>
</g>
</svg>
</div>
CSS
html,
body {
background-color: #85b9dd;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
* {
position: relative;
}
svg {
max-width: 100%;
height: auto;
display: block;
}
.plane-container {
width: 200px;
margin: 0px auto;
z-index: 3;
}
.plane {
width: 100%;
transform: rotate(15deg);
}
/* Animation */
.plane-container {
animation: fly 2s alternate infinite;
animation-timing-function: ease-in-out;
}
@keyframes fly {
0% { transform: translateY(0px); }
100% { transform: translateY(100px); }
}
1 Response