Animated Redacted Text
How do I make an animated redacted text?
Animated redacted text via Sass for all your confidential needs. . What is a animated redacted text? How do you make a animated redacted text? This script and codes were developed by Jeremy Paris on 08 September 2022, Thursday.
Animated Redacted Text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Redacted Text</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Redacted Text Demo</h1>
<article class="left"> <h2>Blackout Left</h2> <p> Long ago in a distant land, I, <span class="redacted">Aku</span>, the <span class="redacted">shape shifting</span> master <span class="redacted">of darkness</span>, unleashed an unspeakable <span class="redacted">evil</span>. But a <span class="redacted">foolish</span> samurai warrior wielding a <span class="redacted">magic sword</span> stepped forth to oppose me. </p> <p> Before the final blow was struck, I tore open a portal in time, and flung him into the future <span class="redacted">where my evil is law</span>. Now the fool seeks to return to the past and undo the future that is <span class="redacted">Aku</span>. </p>
</article>
<article class="right"> <h2>Blackout Right</h2> <p> Many millions of years ago, on <span class="redacted">the planet Cybertron</span>, life existed. But, not life as we know it today. Intelligent <span class="redacted">robots</span>, that could think and feel inhabited the cities. They were called <span class="redacted">Autobots</span> and <span class="redacted">Decepticons</span>. But, the brutal <span class="redacted">Decepticons</span> were driven by a single goal, total domination. They set out to destroy the peace-loving <span class="redacted">Autobots</span>, and a war between the forces of good and evil raged across <span class="redacted">Cybertron</span>, devastating all in its path, and draining <span class="redacted">the planet's</span> once rich sources of energy. The <span class="redacted">Autobots</span>, on the verge of extinction, battle valiantly to survive. </p>
</article>
<article class="top"> <h2>Blackout Top</h2> <p> <span class="redacted">GI Joe</span> is the codename for <span class="redacted">America</span>'s daring, highly trained special mission force. It's purpose: to defend human freedom against <span class="redacted">Cobra</span> - a ruthless, terrorist organization <span class="redacted">determined to rule the world</span>. </p>
</article>
<article class="bottom"> <h2>Blackout Bottom</h2> <p> I am <span class="redacted">Adam</span>, Prince of <span class="redacted">Eternia</span>, Defender of the <span class="redacted">Secrets</span> of <span class="redacted">Castle Greyskull</span>. This is <span class="redacted">Kringer</span>, my fearless friend. Fabulous, secret powers were revealed to me the day I held aloft <span class="redacted">my magic sword</span> and said: <span class="redacted">"By the Power of Greyskull!"</span> </p> <p> <span class="redacted">Kringer</span> became the mighty <span class="redacted">BattleCat</span> and I became <span class="redacted">He-Man</span>, the most powerful man in the Universe! Only three others share this secret: <span class="redacted">Our friends the Sorceress</span>, <span class="redacted">Man-at-Arms</span>, and <span class="redacted">Orko</span>. Together we defend <span class="redacted">Castle Greyskull</span> from the evil forces of <span class="redacted">Skeletor</span>. </p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Animated Redacted Text - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);
body { padding: 2em; background: #eeeeee; color: #222222; font-family: 'Anonymous Pro';
}
h1 { text-align: center;
}
p { line-height: 1.25em;
}
.redacted { position: relative; display: inline-block;
}
.redacted:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #000000;
}
.left .redacted:before, .right .redacted:before { -moz-animation: redact-blackout-width 1s ease-out forwards infinite; -webkit-animation: redact-blackout-width 1s ease-out forwards infinite; animation: redact-blackout-width 1s ease-out forwards infinite;
}
.right .redacted:before { right: 0;
}
.top .redacted:before, .bottom .redacted:before { -moz-animation: redact-blackout-height 1s ease-out forwards infinite; -webkit-animation: redact-blackout-height 1s ease-out forwards infinite; animation: redact-blackout-height 1s ease-out forwards infinite;
}
.bottom .redacted:before { bottom: 0;
}
@-moz-keyframes redact-blackout-width { from { width: 0%; } to { width: 100%; }
}
@-webkit-keyframes redact-blackout-width { from { width: 0%; } to { width: 100%; }
}
@keyframes redact-blackout-width { from { width: 0%; } to { width: 100%; }
}
@-moz-keyframes redact-blackout-height { from { height: 0%; } to { height: 100%; }
}
@-webkit-keyframes redact-blackout-height { from { height: 0%; } to { height: 100%; }
}
@keyframes redact-blackout-height { from { height: 0%; } to { height: 100%; }
}
![Animated Redacted Text - Script Codes](http://shots.codepen.io/digsite_/pen/EaKKdb-512.jpg)
Developer | Jeremy Paris |
Username | digsite_ |
Uploaded | September 08, 2022 |
Rating | 4.5 |
Size | 3,601 Kb |
Views | 26,312 |
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!
Name | Size |
Pinstripes | 1,816 Kb |
Animated Redacted Text | 3,601 Kb |
Transformers Pallete Swap | 7,527 Kb |
Sample Profile Page | 4,816 Kb |
Infinite Punching Loader | 3,074 Kb |
Faux Particles | 214,971 Kb |
Animated D6 | 3,026 Kb |
Vacation Roulette | 3,986 Kb |
Jquery.socialshare.js Demo | 2,196 Kb |
Beating Pixel Heart | 3,940 Kb |
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!
Name | Username | Size |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Em Test | Rodesco | 1,784 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Font stack | Adrianjacob | 1,868 Kb |
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!