test
19 apr 2017, 13:20 • Geen categorie
{ixabay/klimkin
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Reclamevliegtuig Animatie</title>
<style>
body {
margin: 0;
padding: 0;
}
.banner {
width: 300px;
height: 250px;
overflow: hidden;
position: relative;
background: linear-gradient(to top, #87ceeb, #e0f7ff); /* lucht */
border: 1px solid #ccc;
font-family: Arial, sans-serif;
}
.plane {
width: 60px;
height: 30px;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Airplane_silhouette.svg/64px-Airplane_silhouette.svg.png') no-repeat center/contain;
position: absolute;
top: 80px;
left: -100px;
animation: fly 10s linear infinite;
}
.banner-text {
position: absolute;
top: 90px;
left: -500px;
height: 20px;
background: white;
color: #000;
font-weight: bold;
padding: 5px 10px;
border: 2px solid #000;
border-radius: 4px;
animation: flyText 10s linear infinite;
white-space: nowrap;
}
@keyframes fly {
0% { left: -100px; }
100% { left: 350px; }
}
@keyframes flyText {
0% { left: -500px; }
100% { left: 350px; }
}
</style>
</head>
<body>
<div class="banner">
<div class="plane"></div>
<div class="banner-text">Download nu gratis de App van Dongen</div>
</div>
</body>
</html>
Loading articles...
Loading
