Skip to content

Instantly share code, notes, and snippets.

@wmbenedetto

wmbenedetto/css3BackgroundAnimation.html

Last active April 12, 2016 12:58
Show Gist options
  • Save wmbenedetto/5123662 to your computer and use it in GitHub Desktop.
Save wmbenedetto/5123662 to your computer and use it in GitHub Desktop.
Download ZIP
Animating a background gradient with CSS3 to mimic the iPhone's slide-to-unlock screen
Raw
css3BackgroundAnimation.html
<html>
<head>
<title>CSS3 Slide to unlock</title>
<style type="text/css">
body {
background:#333;
}
.slider-text {
background: -webkit-gradient(linear, left top, right top,
color-stop(0, #999),
color-stop(0.750, #999),
color-stop(0.875, #fff),
color-stop(1, #999));
font-size:24px;
font-weight:normal;
font-family: "Helvetica Neue",Helvetica,sans-serif;
letter-spacing:-1px;
margin-left:9px;
width:360px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: glint 2.5s infinite;
}
@-webkit-keyframes glint {
0% {
background-position: 0 0;
}
100% {
background-position: 360px 0;
}
}
.slider-wrapper {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #555),
color-stop(0.5, #444),
color-stop(0.5, #333),
color-stop(1, #222));
padding-top:16px;
height:68px;
width:300px;
}
.slider-body {
background:-webkit-linear-gradient(#222, #555) 1 100%;
border-radius: 12px;
padding:12px 20px 8px 20px;
height: 28px;
width:160px;
}
.slider-border {
background:-webkit-linear-gradient(black, #888) 1 100%;
border-radius: 12px;
margin:0 auto;
padding:1px;
width:200px;
}
</style>
</head>
<body>
<div class="slider-wrapper">
<div class="slider-border">
<div class="slider-body">
<div class="slider-text">slide to unlock</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment