A worm in the sand

Developer
Size
3,577 Kb
Views
6,072

How do I make an a worm in the sand?

What is a a worm in the sand? How do you make a a worm in the sand? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.

A worm in the sand Previews

A worm in the sand - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A worm in the sand</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="oval0"></div>
<div class="oval1"></div>
<div class="oval2"></div>
<div class="oval3"></div>
<div class="oval4"></div>
<div class="oval5"></div>
<div class="oval6"></div>
<div class="oval7"></div>
<div class="oval8"></div>
<div class="oval9"></div>
<div class="oval10"></div>
<div class="oval11"></div>
<div class="oval12"></div>
<div class="oval13"></div>
<div class="oval14"></div>
<div class="oval15"></div>
<div class="oval16"></div>
<div class="oval17"></div>
<div class="oval18"></div>
<div class="oval19"></div>
</body>
</html>

A worm in the sand - Script Codes CSS Codes

@-webkit-keyframes a { 0% { margin-top: -80px; margin-left: 0px; } 33% { margin-top: 20px; margin-left: 0px; } 66% { margin-top: -80px; margin-left: 0px; } 100% { margin-top: 20px; margin-left: 0px; }
}
@keyframes a { 0% { margin-top: -80px; margin-left: 0px; } 33% { margin-top: 20px; margin-left: 0px; } 66% { margin-top: -80px; margin-left: 0px; } 100% { margin-top: 20px; margin-left: 0px; }
}
.oval0 { position: absolute; width: 250px; height: 400px; top: 0px; left: 40%; background-color: rgba(186, 166, 158, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0s; animation-delay: 0s; z-index: 20; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0) scaleY(0.3); transform: scale(0) scaleY(0.3);
}
.oval1 { position: absolute; width: 250px; height: 400px; top: 5px; left: 40%; background-color: rgba(175, 152, 143, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; z-index: 19; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.15643) scaleY(0.3); transform: scale(0.15643) scaleY(0.3);
}
.oval2 { position: absolute; width: 250px; height: 400px; top: 10px; left: 40%; background-color: rgba(165, 139, 128, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; z-index: 18; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.30902) scaleY(0.3); transform: scale(0.30902) scaleY(0.3);
}
.oval3 { position: absolute; width: 250px; height: 400px; top: 15px; left: 40%; background-color: rgba(154, 125, 113, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; z-index: 17; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.45399) scaleY(0.3); transform: scale(0.45399) scaleY(0.3);
}
.oval4 { position: absolute; width: 250px; height: 400px; top: 20px; left: 40%; background-color: rgba(141, 112, 101, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; z-index: 16; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.58779) scaleY(0.3); transform: scale(0.58779) scaleY(0.3);
}
.oval5 { position: absolute; width: 250px; height: 400px; top: 25px; left: 40%; background-color: rgba(127, 100, 90, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; z-index: 15; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.70711) scaleY(0.3); transform: scale(0.70711) scaleY(0.3);
}
.oval6 { position: absolute; width: 250px; height: 400px; top: 30px; left: 40%; background-color: rgba(112, 89, 79, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; z-index: 14; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.80902) scaleY(0.3); transform: scale(0.80902) scaleY(0.3);
}
.oval7 { position: absolute; width: 250px; height: 400px; top: 35px; left: 40%; background-color: rgba(97, 77, 69, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; z-index: 13; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.89101) scaleY(0.3); transform: scale(0.89101) scaleY(0.3);
}
.oval8 { position: absolute; width: 250px; height: 400px; top: 40px; left: 40%; background-color: rgba(82, 65, 58, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; z-index: 12; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.95106) scaleY(0.3); transform: scale(0.95106) scaleY(0.3);
}
.oval9 { position: absolute; width: 250px; height: 400px; top: 45px; left: 40%; background-color: rgba(67, 53, 48, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; z-index: 11; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.98769) scaleY(0.3); transform: scale(0.98769) scaleY(0.3);
}
.oval10 { position: absolute; width: 250px; height: 400px; top: 50px; left: 40%; background-color: rgba(52, 41, 37, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1s; animation-delay: 1s; z-index: 10; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1) scaleY(0.3); transform: scale(1) scaleY(0.3);
}
.oval11 { position: absolute; width: 250px; height: 400px; top: 55px; left: 40%; background-color: rgba(37, 29, 26, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; z-index: 9; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.98769) scaleY(0.3); transform: scale(0.98769) scaleY(0.3);
}
.oval12 { position: absolute; width: 250px; height: 400px; top: 60px; left: 40%; background-color: rgba(22, 18, 16, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; z-index: 8; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.95106) scaleY(0.3); transform: scale(0.95106) scaleY(0.3);
}
.oval13 { position: absolute; width: 250px; height: 400px; top: 65px; left: 40%; background-color: rgba(7, 6, 5, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; z-index: 7; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.89101) scaleY(0.3); transform: scale(0.89101) scaleY(0.3);
}
.oval14 { position: absolute; width: 250px; height: 400px; top: 70px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; z-index: 6; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.80902) scaleY(0.3); transform: scale(0.80902) scaleY(0.3);
}
.oval15 { position: absolute; width: 250px; height: 400px; top: 75px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; z-index: 5; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.70711) scaleY(0.3); transform: scale(0.70711) scaleY(0.3);
}
.oval16 { position: absolute; width: 250px; height: 400px; top: 80px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; z-index: 4; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.58779) scaleY(0.3); transform: scale(0.58779) scaleY(0.3);
}
.oval17 { position: absolute; width: 250px; height: 400px; top: 85px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; z-index: 3; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.45399) scaleY(0.3); transform: scale(0.45399) scaleY(0.3);
}
.oval18 { position: absolute; width: 250px; height: 400px; top: 90px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; z-index: 2; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.30902) scaleY(0.3); transform: scale(0.30902) scaleY(0.3);
}
.oval19 { position: absolute; width: 250px; height: 400px; top: 95px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; z-index: 1; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.15643) scaleY(0.3); transform: scale(0.15643) scaleY(0.3);
}
.oval20 { position: absolute; width: 250px; height: 400px; top: 100px; left: 40%; background-color: rgba(0, 0, 0, 0.5); -webkit-animation-name: a; animation-name: a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: 2s; animation-delay: 2s; z-index: 0; border-radius: 50%; box-shadow: 0px 4px 10px 1px #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0) scaleY(0.3); transform: scale(0) scaleY(0.3);
}
html { height: 100%; background: #f1e767; background: -webkit-gradient(left top, left bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645)); background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%); background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
}
A worm in the sand - Script Codes
A worm in the sand - Script Codes
Home Page Home
Developer Josep Llodrà
Username jllodra
Uploaded January 19, 2023
Rating 3.5
Size 3,577 Kb
Views 6,072
Do you need developer help for A worm in the sand?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Llodrà (jllodra) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!