-
Notifications
You must be signed in to change notification settings - Fork 0
/
starry.html
113 lines (105 loc) · 3.81 KB
/
starry.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>Starry Night CSS3 Background Animation</title>
<link rel="stylesheet" href="style.css" />
<style>
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<header>
<h1>Pure CSS3 Background Animation</h1>
<div id="backlinks">
<a href="http://www.inwebson.com/html5/html5-form-with-css3-markup/">BACK TO ARTICLE »</a>
<a href="http://www.inwebson.com">Visit inWebson.com »</a>
</div>
<div class="clearfix"></div>
</header>
<!-- Content -->
<section id="wrapper">
<nav id="navigation">
<ul>
<li><a href="background.html" title="Static CSS3 background">Background</a></li>
<li class="current"><a href="#" title="Starry night animation">Starry Night</a></li>
<li><a href="snow.html" title="Snow fall animation">Snow Fall</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<div id="container">
<h2>Starry Night CSS3 Background Animation</h2>
<div id="content">
<p>There is <strong>no JavaScript</strong> and <strong>no images</strong> are used in this page. The only thing that make this happen is due to the magic of <strong>CSS3 animation</strong>.</p>
<p>If you didn't see an animated background, means your current browser is not support CSS3 animation attributes, try using latest version of <strong>Chrome</strong> or <strong>Safari</strong> to view this page.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<span>© 2011 <a href="http://www.inwebson.com">inWebson.com</a>. Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. Powered by HTML5 and CSS3.</span>
</footer>
</body>
</html>