A worm in the sand

Developer

Size

3,577 Kb

Views

6,072

A worm in the sand Previews
A worm in the sand HTML Codes
A worm in the sand CSS Codes

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 );
}

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

Name	Size
Dielectric breakdown model	3,295 Kb
Twisted text	3,072 Kb
Boxes with css arrows	3,121 Kb
Gradient overlay button concept	2,556 Kb
Mesmerizing octopus	3,549 Kb
3D Pythagoras tree	3,678 Kb
Classic text scroller	5,758 Kb
CSS Loading text	2,461 Kb
Drawing a tree	2,269 Kb
UTF-8 Recycle animation	1,643 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Kudos Please	TimPietrusky	6,624 Kb
Ripples in water	Nobitagit	2,704 Kb
Menubar compass mixin	Michaelparenteau	4,925 Kb
GrcJS	Vino6	2,047 Kb
Css color for svg	Ademilter	2,392 Kb
Loading animation - freedom purchase	Rocbear	2,567 Kb
Replace url via jquery	Serluk	1,429 Kb
Button Option Group	Honchoman	1,859 Kb
React Markdown Previewer	C0d0er	3,190 Kb
Animated Donut Chart	Jplhomer	3,808 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!