Just some bunting gently blowing in the breeze on a balmy afternoon.
A Pen by Adam Henley on CodePen.
Just some bunting gently blowing in the breeze on a balmy afternoon.
A Pen by Adam Henley on CodePen.
.bunting | |
%ul | |
- 16.times do | |
%li#someID | |
@bg: rgb(178, 215, 255); | |
html{min-width:1920px;} | |
body { background-color: @bg; overflow:hidden;} | |
.down_triangle(@w @h @c){ | |
width: 0px; | |
height: 0px; | |
border-style: solid; | |
border-width: @h @w/2 0 @w/2; | |
border-color: @c transparent transparent transparent; | |
-webkit-transform:rotate(360deg); | |
} | |
.swing_keyframes(@d){ | |
0% { .rotate(0); } | |
25% { /*width:50px; height:50px; */} | |
50% { .rotateX(@d); } | |
75% { /*width:50px; height:50px;*/ } | |
100% { .rotateX(0deg); } | |
} | |
.z-travel-keyframes(){ | |
0% { .rotate(0); } | |
25% { /*width:50px; height:50px; */} | |
50% { .rotateX(10); } | |
75% { /*width:50px; height:50px;*/ } | |
100% { .rotateX(0deg); } | |
} | |
.bunting ul { | |
//text-align:justify; | |
white-space: nowrap | |
display:block; | |
position:relative; | |
width:150%;height:150px; | |
top:0;right:0;bottom:0;left:-70px; | |
border-top: 3px solid rgb(206, 185, 125); | |
border-top-left-radius:5px; | |
border-top-right-radius:5px; | |
min-width:1920px; | |
.box-shadow(1px -1px 0px 1px lighten(rgb(206, 185, 125),15%) ); | |
margin-top:20px; | |
.animation(z-travel 8s linear infinite); | |
@-webkit-keyframes z-travel { .z-travel-keyframes(); } | |
@-moz-keyframes z-travel { .z-travel-keyframes(); } | |
@-o-keyframes z-travel { .z-travel-keyframes(); } | |
@keyframes z-travel { .z-travel-keyframes(); } | |
li { | |
display:inline-block; | |
width:100px; height:100px; | |
margin:0 15px; | |
.transform-origin(50% 0); | |
.perspective(200px); | |
.down_triangle(100px, 100px, rgb(255,255,255)); | |
background-color:transparent; | |
} | |
li:nth-of-type(1n+1){ | |
border-top-color: rgb(102, 102, 255); | |
.animation(swing 8s linear infinite); | |
@-webkit-keyframes swing { .swing_keyframes(30); } | |
@-moz-keyframes swing { .swing_keyframes(30); } | |
@-o-keyframes swing { .swing_keyframes(30); } | |
@keyframes swing { .swing_keyframes(30); } | |
} | |
li:nth-of-type(2n+1){ | |
border-top-color: rgb(72, 165, 72); | |
.animation(swing1 8s linear infinite); | |
@-webkit-keyframes swing1 { .swing_keyframes(-14); } | |
@-moz-keyframes swing1 { .swing_keyframes(-14); } | |
@-o-keyframes swing1 { .swing_keyframes(-14); } | |
@keyframes swing1 { .swing_keyframes(-14); } | |
} | |
li:nth-of-type(3n+2){ | |
border-top-color: rgb(255, 255, 181); | |
.animation(swing2 8s linear infinite); | |
@-webkit-keyframes swing2 { .swing_keyframes(21); } | |
@-moz-keyframes swing2 { .swing_keyframes(21); } | |
@-o-keyframes swing2 { .swing_keyframes(21); } | |
@keyframes swing2 { .swing_keyframes(21); } | |
} | |
} | |