123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- /* ==============================================================================================
- This copyright notice must be kept untouched in the stylesheet at all times.
- The original version of this stylesheet and the associated (x)html
- is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
- Copyright (c) Script Tutorials. All rights reserved.
- This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
- ================================================================================================= */
- * {
- margin: 0;
- padding: 0;
- }
- body{
- background-color:rgba(33, 33, 33, 1);
- color:#ffffff;
- display:block;
- font: 18px/1.3 Arial,sans-serif;
- caret-color: rgba(255,255,255,0.2);
- overflow: hidden;
- }
-
- input[type=text] {
- background-color: rgba(255,255,255, 0.0);
- border: 0;
- border-bottom: 4px solid rgba(255,255,255, 0.2);
- color: white;
- height: 80px;
- width:500px;
- font: 50px/1.3 Arial,sans-serif;
- text-align: center;
- }
- input::placeholder {
- color: rgba(255,255,255, 0.4);
- }
-
- h2{
- margin-top: 30px;
- text-align: center;
- }
- header h2{
- font-size: 22px;
- margin: 0 auto;
- padding: 10px 0;
- width: 80%;
- text-align: center;
- }
- header a, a:visited {
- text-decoration:none;
- color:#fcfcfc;
- }
-
- @keyframes move-twink-back {
- from {background-position:0 0;}
- to {background-position:-10000px 5000px;}
- }
- @-webkit-keyframes move-twink-back {
- from {background-position:0 0;}
- to {background-position:-10000px 5000px;}
- }
- @-moz-keyframes move-twink-back {
- from {background-position:0 0;}
- to {background-position:-10000px 5000px;}
- }
- @-ms-keyframes move-twink-back {
- from {background-position:0 0;}
- to {background-position:-10000px 5000px;}
- }
-
- #content{
- color:#fff;
- text-align: center;
- position:absolute;
-
- top:35%;
- left:0;
- right:0;
- bottom:0;
- width:100%;
- height:100%;
- display:block;
-
- z-index:2;
- }
-
- .stars, .twinkling {
- position:absolute;
- top:0;
- left:0;
- right:0;
- bottom:0;
- width:100%;
- height:100%;
- display:block;
- }
-
- .stars {
- background:#000 url(images/stars.png) repeat top center;
- z-index:0;
- }
-
- .twinkling{
- background:transparent url(images/twinkling.png) repeat top center;
- z-index:1;
-
- -moz-animation:move-twink-back 500s linear infinite;
- -ms-animation:move-twink-back 500s linear infinite;
- -o-animation:move-twink-back 500s linear infinite;
- -webkit-animation:move-twink-back 500s linear infinite;
- animation:move-twink-back 500s linear infinite;
- }
|