Click Here for the demo...if your using Safari
I add a live digital clock Widget.html file next time as we build our iOS Winterboard Theme.
<?xml version="1.0" encoding="UTF-16"?>
<html>
<head>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body {
margin: 0;
}
@-webkit-keyframes fade {
0% { opacity: 0; }
10% { opacity: 0.8; }
100% { opacity: 0; }
}
@-webkit-keyframes slide {
0% {top: 0%; left: 0%;}
50% {top: 20%; left: 0%;}
100% {top: 100%; left: 0%;}
}
#slide01 {
margin: 0;
padding: 0px;
height: 480px;
width: 320px;
background: url(http://variablevisions.com/images/ALT-Wallpaper@2x.png);
-webkit-background-size: cover;
-webkit-background-size: cover;
-webkit-animation-name:fade;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
position: relative;
}
#slide02{
margin: 0;
height: 480px;
width: 320px;
background: url(http://variablevisions.com/images/STARS-Wallpaper@2x.png);
-webkit-background-size: cover;
-webkit-animation-name:slide, fade;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
position: absolute;
}
</style>
</head>
<body>
<div id="slide01">
<div id="slide02"></div>
</div>
</body>
</html>
