Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> Spinning Rays with CSS3


Code Snippet </> Info


Snippet Name: Spinning Rays with CSS3

Description: Create spinning rays using only CSS3!
Example: View Code Demo


Note: You will need to download the /rays-main.png image (right click - save as) using the image URL path inside the source code. Do Not Hotlink The Image From Our Server... We May Change The Image At Any Time!

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:45:03

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Create Spinning Rays with CSS3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Begin Create Spinning Rays with CSS3 */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} @-webkit-keyframes spin {from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} } @-moz-keyframes spin {from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} } @-ms-keyframes spin {from {-ms-transform:rotate(0deg);} to {-ms-transform:rotate(360deg);} } #RaysHolder {position:relative; width:490px; height:490px; margin:100px 0 0 200px;} #raysLogo { width:135px; /* centered image width here */ height:31px; /* centered image height here */ text-indent:-3000px; background:url('http://snapbuilder.com/images/logo.png') 0 0 no-repeat; display:block; position:absolute; top:0; left:0; z-index:2; } #rays { background:url('http://snapbuilder.com/code_snippets/view_code_example/css/miscellaneous/images/rays-main.png') 0 0 no-repeat; position:absolute; top:-228px; left:-180px; width:490px; height:490px; -webkit-animation-name:spin; -webkit-animation-duration:40000ms; /* 40 seconds */ -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name:spin; -moz-animation-duration:40000ms; /* 40 seconds */ -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -ms-animation-name:spin; -ms-animation-duration:40000ms; /* 40 seconds */ -ms-animation-iteration-count:infinite; -ms-animation-timing-function:linear; /* narly needed opera code */ -o-transition:rotate(3600deg); /* works */ } #rays:hover { /* -webkit-animation-duration:10000ms; 10 seconds - speed it up on hover! */ } </style> </head> <body> <div id="content"> <h1>Create Spinning Rays with CSS3</h1> <p>Check out the spinning rays below... they're created using only CSS3!</p> <div id="RaysHolder"> <a href="http://snapbuilder.com" id="raysLogo">SnapBuilder</a> <div id="rays"></div> </div> <br /><br /> <div id="code"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_172.html">CSS3 Spinning Rays Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library