Animated Redacted Text

Developer
Jeremy Paris
Size
3,601 Kb
Views
26,312
  1. Animated Redacted Text Previews
  2. Animated Redacted Text HTML Codes
  3. Animated Redacted Text CSS Codes

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 Previews
IQ Test

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
Animated Redacted Text - Script Codes
Home Page Home
Developer Jeremy Paris
Username digsite_
Uploaded September 08, 2022
Rating 4.5
Size 3,601 Kb
Views 26,312
Do you need developer help for Animated Redacted Text?

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!

Jeremy Paris (digsite_) Script Codes
Name
Fun with Dropcap.JS
Transformers Pallete Swap
Decepticon Logo
Push It
Sample Profile Page
Faux Particles
Spinning-X Loader
Beating Pixel Heart
Pinstripes
Fieldset Style Sketching
Create amazing web 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!