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: 2019-12-09 02:03:11
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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 https://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>
|