init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
Executable
+226
@@ -0,0 +1,226 @@
|
||||
/* -------------- Animation -------------- */
|
||||
|
||||
#animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* -------------- Frame -------------- */
|
||||
|
||||
.showRoll #frame {
|
||||
border-color: hsl(0,0%,70%);
|
||||
}
|
||||
|
||||
#frame {
|
||||
width: 50px;
|
||||
height: 72px;
|
||||
border: 1px solid transparent;
|
||||
background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||
animation: frame-animation 1s steps(10) infinite;
|
||||
}
|
||||
|
||||
@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
|
||||
|
||||
|
||||
|
||||
/* -------------- Roll -------------- */
|
||||
|
||||
.showRoll #roll {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#roll {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 500px;
|
||||
height: 72px;
|
||||
border: 1px solid hsl(0,0%,70%);
|
||||
background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||
transition: opacity .3s linear;
|
||||
animation: roll-animation 1s steps(10) infinite;
|
||||
}
|
||||
|
||||
@keyframes roll-animation {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-500px); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Global ------------------------------------------------------ */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
||||
background: #f0f0f0 url(../img/bg.png);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 50px;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: hsl(210,100%,60%);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(210,100%,70%);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: hsl(210,100%,50%);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: hsl(0,0%,60%);
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: hsl(0,0%,20%);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: hsl(0,0%,60%);
|
||||
}
|
||||
.WebKit ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Show Sprite Checkbox ------------------------------------------------------ */
|
||||
|
||||
.WebKit #show {
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
border-radius: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -2px 6px 0 0;
|
||||
vertical-align: middle;
|
||||
border: 10px solid hsl(0,0%,80%);
|
||||
background: hsl(0,0%,40%);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||
}
|
||||
|
||||
.WebKit #show:checked:active,
|
||||
.WebKit #show:active {
|
||||
border: 0px solid hsl(0,0%,80%);
|
||||
-webkit-transition-duration: .1;
|
||||
}
|
||||
|
||||
.WebKit #show:checked {
|
||||
border: 5px solid hsl(0,0%,80%);
|
||||
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Animation Duration ------------------------------------------------------ */
|
||||
|
||||
#duration {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: -4px 6px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Label */
|
||||
|
||||
#duration-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.WebKit #duration-label {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
top: 6px;
|
||||
font-size: 11px;
|
||||
color: hsl(0,0%,60%);
|
||||
text-shadow: 0 1px 0 hsla(0,0%,100%,.3);
|
||||
pointer-events: none;
|
||||
-webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1),
|
||||
color .6s .2s ease-out;
|
||||
}
|
||||
|
||||
.WebKit #duration-label.isRight {
|
||||
right: 50%;
|
||||
margin-right: -20px;
|
||||
left: auto;
|
||||
-webkit-transform: translate3d(20px,0,0);
|
||||
}
|
||||
.WebKit #duration-label.isLeft {
|
||||
right: auto;
|
||||
margin-left: -20px;
|
||||
left: 50%;
|
||||
-webkit-transform: translate3d(-20px,0,0);
|
||||
}
|
||||
|
||||
.WebKit #duration:active #duration-label {
|
||||
color: hsl(0,0%,30%);
|
||||
-webkit-transition-delay: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Input */
|
||||
|
||||
.WebKit #duration-input {
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100px;
|
||||
border-radius: 20px;
|
||||
background: hsl(0,0%,80%);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.WebKit #duration-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 5px solid hsl(0,0%,80%);
|
||||
background: hsl(0,0%,40%);
|
||||
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4);
|
||||
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||
}
|
||||
|
||||
.WebKit #duration-input:active::-webkit-slider-thumb {
|
||||
border: 0px solid hsl(0,0%,80%);
|
||||
-webkit-transition-duration: .1;
|
||||
}
|
||||
Reference in New Issue
Block a user