Login / Join
Text with an Animated Background (Firefox)
submitted on 19/03/2013 by
Codicode
+ infos
Config
Embed
Share
Text with an Animated Background (Firefox)
by
Codicode
This experiment show how to create a Text with a CSS3 background and animate it.
by Chtiwi Malek
http://www.codicode.com
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="260" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div align="center"> <div id="bkDiv"></div> </div> <svg> <defs> <mask id="theMask"> <text x="0" y="110" id="theText" fill="#fff">Codicode</text> </mask> </defs> </svg>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#000; color:#fff; } #bkDiv { background: linear-gradient(-45deg, #fff 30%,transparent 45%,transparent 55%,#fff 70%), linear-gradient(45deg, #fff 30%,transparent 45%,transparent 55%,#fff 70%); background-color: #f00; background-size: 15px 15px; background-position:0px 0px; height:110px; width:465px; animation: cAnim 1s linear 0s infinite; mask: url(#theMask); } @keyframes cAnim { 100% {background-position:15px 0px;} } #theText { font-size:120px; font-family:impact; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact