Login / Join
SVG & CSS3 Rings Animation
submitted on 18/02/2013 by
Codicode
+ infos
Config
Embed
Share
SVG & CSS3 Rings Animation
by
Codicode
SVG & CSS3 Rings Animation
by Chtiwi Malek.
Source : http://www.codicode.com/art/drawing_and_animating_shapes_svg_css3.aspx
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) :
//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
+ 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="956" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div style="text-align:center;"> <svg class="mysvg" width="98px" height="84px" version="1.1"> <g style="stroke-width:5; fill:none;"> <circle cx="70" cy="30" r="25" style="stroke:#825"/> <circle cx="50" cy="55" r="25" style="stroke:#492"/> <circle cx="30" cy="30" r="25" style="stroke:#246"/> </g> </svg> </div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { /* Just the background */ margin:20px; background: linear-gradient(90deg, #fff 3%,transparent 3%,transparent 82%,#fff 82%),linear-gradient(0deg , #fff 3%,transparent 3%,transparent 82%,#fff 82%); background-color: #ccc; background-size: 20px 20px; } .mysvg { animation:r1 1.5s linear infinite; cursor:pointer; } .mysvg:hover { animation-play-state:paused; } @keyframes r1 { 100% { transform: rotate(-360deg); } }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact