Shake it

Developer
Size
2,486 Kb
Views
32,384

How do I make an shake it?

What is a shake it? How do you make a shake it? This script and codes were developed by Rahul Kumar on 14 October 2022, Friday.

Shake it Previews

Shake it - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shake it</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="thing">  <h1>Você é mais doce do que o chocolate.</h1>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="squiggly-filters"> <defs> <filter id="squiggly-0"> <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="0" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-1"> <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="1" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-2"> <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="2" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-3"> <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-4"> <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="4" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> </defs>
</svg>
</body>
</html>

Shake it - Script Codes CSS Codes

*, *:before, *:after { margin: 0; padding: 0; -moz-box-shadow: border-box; -webkit-box-shadow: border-box; box-shadow: border-box;
}
*:before, *:after { content: "";
}
html, body { height: 100%;
}
body { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; font-size: 100%; font-family: monospace; background-color: #1e1e1e; color: #fff;
}
.squiggly-filters { display: none;
}
.thing { padding: 1em; width: 100%;
}
.thing h1 { font-size: 3em; text-align: center; -moz-animation: squiggly 0.25s linear infinite; -webkit-animation: squiggly 0.25s linear infinite; animation: squiggly 0.25s linear infinite;
}
@-moz-keyframes squiggly { 0% { filter: url("#squiggly-0"); } 25% { filter: url("#squiggly-1"); } 50% { filter: url("#squiggly-2"); } 75% { filter: url("#squiggly-3"); } 100% { filter: url("#squiggly-4"); }
}
@-webkit-keyframes squiggly { 0% { -webkit-filter: url("#squiggly-0"); filter: url("#squiggly-0"); } 25% { -webkit-filter: url("#squiggly-1"); filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); filter: url("#squiggly-2"); } 75% { -webkit-filter: url("#squiggly-3"); filter: url("#squiggly-3"); } 100% { -webkit-filter: url("#squiggly-4"); filter: url("#squiggly-4"); }
}
@keyframes squiggly { 0% { -webkit-filter: url("#squiggly-0"); filter: url("#squiggly-0"); } 25% { -webkit-filter: url("#squiggly-1"); filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); filter: url("#squiggly-2"); } 75% { -webkit-filter: url("#squiggly-3"); filter: url("#squiggly-3"); } 100% { -webkit-filter: url("#squiggly-4"); filter: url("#squiggly-4"); }
}
Shake it - Script Codes
Shake it - Script Codes
Home Page Home
Developer Rahul Kumar
Username rk007
Uploaded October 14, 2022
Rating 3
Size 2,486 Kb
Views 32,384
Do you need developer help for Shake it?

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!

Rahul Kumar (rk007) Script Codes
Name
A Pen by Rahul Kumar
HeartIt
For you
Chat
Coffee
Bitch Roxana
You
Hmmm...
Hey
-
Create amazing captions 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!