tag:blogger.com,1999:blog-34300624880783224182024-03-05T09:00:47.791-08:00Sand □ BOXTesting & PlayingFlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-3430062488078322418.post-29501222607387811742023-01-08T12:05:00.047-08:002023-01-09T00:38:45.763-08:00CSS TV Circle Test Pattern<div style="display:none">
<img alt="PM5544 TV circle test pattern" border="0" width="320" data-original-height="1160" data-original-width="1500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3Gc3ptZJN80pzLq_26Tlvgp86taPEZWw8beELN_rhmUqIB1EC6CKyT-Wiks5xRLN4v5N0WLT8zV_gT3shPxjC-lFBf3xNqzAIckN_HX58duMsR3rgyBx41uhrlxWcTBimzDoAl5Iz69lvChAO2dnol-UI2SPrPSBVhX0y5mVSxwl-OC4D56XK2ZJdQ/s320/FlyBirdsBOX-CSS-PM5544_with_non-PAL_signals.png"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:black">
<div id="screen-wrap">
<canvas id="tv"></canvas>
<div class="backdrop">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
#tv {
position: absolute;
z-index:2;
width:100%;
height: 100vw;
top: 0;
left: 0;
opacity:0.33;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
#screen-wrap {
position: relative;
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
transform: scale(1);
background:#000;
display: flex;
align-items: center;
justify-content: center;
}
#screen-wrap .backdrop,
#screen-wrap .center {
border: 2vw dashed #000;
background:#fff;
transform: scale(.95);
}
@media only screen and (min-width: 768px) {
#screen-wrap .backdrop,
#screen-wrap .center {
transform: scale(.85);
}
}
@media only screen and (min-width: 992px) {
#screen-wrap .backdrop,
#screen-wrap .center {
transform: scale(.75);
}
}
#screen-wrap div {
display: grid;
grid-template-columns: repeat(17, 1fr);
grid-gap: 0;
}
#screen-wrap div div {
border: 1px solid white;
background: #7a7a7a;
width: calc(5.5vw - 2px);
height: calc(5.5vw - 2px);
}
#screen-wrap .center {
position: absolute;
z-index:1;
clip-path: circle(38%);
}
#screen-wrap .center div {
background: #fff
}
/* backdrop */
#screen-wrap .backdrop div:nth-child(19),
#screen-wrap .backdrop div:nth-child(36),
#screen-wrap .backdrop div:nth-child(53),
#screen-wrap .backdrop div:nth-child(70),
#screen-wrap .backdrop div:nth-child(87) {
background: #3d9a7a
}
#screen-wrap .backdrop div:nth-child(20),
#screen-wrap .backdrop div:nth-child(32),
#screen-wrap .backdrop div:nth-child(37),
#screen-wrap .backdrop div:nth-child(49) {
background: #577ad6
}
#screen-wrap .backdrop div:nth-child(33),
#screen-wrap .backdrop div:nth-child(50),
#screen-wrap .backdrop div:nth-child(67),
#screen-wrap .backdrop div:nth-child(84),
#screen-wrap .backdrop div:nth-child(101) {
background: #79900a
}
#screen-wrap .backdrop div:nth-child(104) {
box-shadow:
inset 0 2.5vw 0 0 #3d9a7a,
inset 0 -2.5vw 0 0 #b8597a;
}
#screen-wrap .backdrop div:nth-child(118) {
box-shadow:
inset 0 2.5vw 0 0 #79900a,
inset 0 -2.5vw 0 0 #7a64e9;
}
#screen-wrap .backdrop div:nth-child(121),
#screen-wrap .backdrop div:nth-child(138),
#screen-wrap .backdrop div:nth-child(155),
#screen-wrap .backdrop div:nth-child(172),
#screen-wrap .backdrop div:nth-child(189) {
background: #b8597a
}
#screen-wrap .backdrop div:nth-child(173),
#screen-wrap .backdrop div:nth-child(190),
#screen-wrap .backdrop div:nth-child(185),
#screen-wrap .backdrop div:nth-child(202) {
background: #9d791f
}
#screen-wrap .backdrop div:nth-child(135),
#screen-wrap .backdrop div:nth-child(152),
#screen-wrap .backdrop div:nth-child(169),
#screen-wrap .backdrop div:nth-child(186),
#screen-wrap .backdrop div:nth-child(203) {
background: #7a64e9
}
/* backdrop borders */
#screen-wrap .backdrop div:nth-child(19),
#screen-wrap .backdrop div:nth-child(36) {
border-right-color: #3d9a7a;
}
#screen-wrap .backdrop div:nth-child(19),
#screen-wrap .backdrop div:nth-child(36),
#screen-wrap .backdrop div:nth-child(53),
#screen-wrap .backdrop div:nth-child(70),
#screen-wrap .backdrop div:nth-child(87) {
border-bottom-color: #3d9a7a;
}
#screen-wrap .backdrop div:nth-child(36),
#screen-wrap .backdrop div:nth-child(53),
#screen-wrap .backdrop div:nth-child(70),
#screen-wrap .backdrop div:nth-child(87),
#screen-wrap .backdrop div:nth-child(104) {
border-top-color: #3d9a7a;
}
#screen-wrap .backdrop div:nth-child(33),
#screen-wrap .backdrop div:nth-child(50) {
border-left-color: #79900a
}
#screen-wrap .backdrop div:nth-child(33),
#screen-wrap .backdrop div:nth-child(50),
#screen-wrap .backdrop div:nth-child(67),
#screen-wrap .backdrop div:nth-child(84),
#screen-wrap .backdrop div:nth-child(101) {
border-bottom-color: #79900a
}
#screen-wrap .backdrop div:nth-child(50),
#screen-wrap .backdrop div:nth-child(67),
#screen-wrap .backdrop div:nth-child(84),
#screen-wrap .backdrop div:nth-child(101),
#screen-wrap .backdrop div:nth-child(118) {
border-top-color: #79900a
}
#screen-wrap .backdrop div:nth-child(20),
#screen-wrap .backdrop div:nth-child(37) {
border-left-color: #577ad6;
}
#screen-wrap .backdrop div:nth-child(20),
#screen-wrap .backdrop div:nth-child(32) {
border-bottom-color: #577ad6;
}
#screen-wrap .backdrop div:nth-child(37),
#screen-wrap .backdrop div:nth-child(49) {
border-top-color: #577ad6;
}
#screen-wrap .backdrop div:nth-child(32),
#screen-wrap .backdrop div:nth-child(49) {
border-right-color: #577ad6;
}
#screen-wrap .backdrop div:nth-child(104),
#screen-wrap .backdrop div:nth-child(121),
#screen-wrap .backdrop div:nth-child(138),
#screen-wrap .backdrop div:nth-child(155),
#screen-wrap .backdrop div:nth-child(172) {
border-bottom-color: #b8597a;
}
#screen-wrap .backdrop div:nth-child(121),
#screen-wrap .backdrop div:nth-child(138),
#screen-wrap .backdrop div:nth-child(155),
#screen-wrap .backdrop div:nth-child(172),
#screen-wrap .backdrop div:nth-child(189) {
border-top-color: #b8597a;
}
#screen-wrap .backdrop div:nth-child(172),
#screen-wrap .backdrop div:nth-child(189) {
border-right-color: #b8597a;
}
#screen-wrap .backdrop div:nth-child(118),
#screen-wrap .backdrop div:nth-child(135),
#screen-wrap .backdrop div:nth-child(152),
#screen-wrap .backdrop div:nth-child(169),
#screen-wrap .backdrop div:nth-child(186) {
border-bottom-color: #7a64e9
}
#screen-wrap .backdrop div:nth-child(135),
#screen-wrap .backdrop div:nth-child(152),
#screen-wrap .backdrop div:nth-child(169),
#screen-wrap .backdrop div:nth-child(186),
#screen-wrap .backdrop div:nth-child(203) {
border-top-color: #7a64e9
}
#screen-wrap .backdrop div:nth-child(186),
#screen-wrap .backdrop div:nth-child(203) {
border-left-color: #7a64e9
}
#screen-wrap .backdrop div:nth-child(173),
#screen-wrap .backdrop div:nth-child(190) {
border-left-color: #9d791f
}
#screen-wrap .backdrop div:nth-child(173),
#screen-wrap .backdrop div:nth-child(185) {
border-bottom-color: #9d791f
}
#screen-wrap .backdrop div:nth-child(190),
#screen-wrap .backdrop div:nth-child(202) {
border-top-color: #9d791f
}
#screen-wrap .backdrop div:nth-child(185),
#screen-wrap .backdrop div:nth-child(202) {
border-right-color: #9d791f
}
/**/
#screen-wrap .backdrop div:nth-child(1),
#screen-wrap .backdrop div:nth-child(18),
#screen-wrap .backdrop div:nth-child(35),
#screen-wrap .backdrop div:nth-child(52),
#screen-wrap .backdrop div:nth-child(69),
#screen-wrap .backdrop div:nth-child(86),
#screen-wrap .backdrop div:nth-child(103),
#screen-wrap .backdrop div:nth-child(120),
#screen-wrap .backdrop div:nth-child(137),
#screen-wrap .backdrop div:nth-child(154),
#screen-wrap .backdrop div:nth-child(171),
#screen-wrap .backdrop div:nth-child(188),
#screen-wrap .backdrop div:nth-child(205) {
background-image: linear-gradient(0deg,
#b8597a 5%, #3d9a7a 5%,
#3d9a7a 10%, #b8597a 10%,
#b8597a 15%, #3d9a7a 15%,
#3d9a7a 20%, #b8597a 20%,
#b8597a 25%, #3d9a7a 25%,
#3d9a7a 30%, #b8597a 30%,
#b8597a 35%, #3d9a7a 35%,
#3d9a7a 40%, #b8597a 40%,
#b8597a 45%, #3d9a7a 45%,
#3d9a7a 50%, #b8597a 50%,
#b8597a 55%, #3d9a7a 55%,
#3d9a7a 60%, #b8597a 60%,
#b8597a 65%, #3d9a7a 65%,
#3d9a7a 70%, #b8597a 70%,
#b8597a 75%, #3d9a7a 75%,
#3d9a7a 80%, #b8597a 80%,
#b8597a 85%, #3d9a7a 85%,
#3d9a7a 90%, #b8597a 90%,
#b8597a 95%, #3d9a7a 95%,
#3d9a7a 100%);
}
#screen-wrap .backdrop div:nth-child(17),
#screen-wrap .backdrop div:nth-child(34),
#screen-wrap .backdrop div:nth-child(51),
#screen-wrap .backdrop div:nth-child(68),
#screen-wrap .backdrop div:nth-child(85),
#screen-wrap .backdrop div:nth-child(102),
#screen-wrap .backdrop div:nth-child(119),
#screen-wrap .backdrop div:nth-child(136),
#screen-wrap .backdrop div:nth-child(153),
#screen-wrap .backdrop div:nth-child(170),
#screen-wrap .backdrop div:nth-child(187),
#screen-wrap .backdrop div:nth-child(204),
#screen-wrap .backdrop div:nth-child(221) {
background-image: linear-gradient(0deg,
#7a64e9 5%, #78900b 5%,
#78900b 10%, #7a64e9 10%,
#7a64e9 15%, #78900b 15%,
#78900b 20%, #7a64e9 20%,
#7a64e9 25%, #78900b 25%,
#78900b 30%, #7a64e9 30%,
#7a64e9 35%, #78900b 35%,
#78900b 40%, #7a64e9 40%,
#7a64e9 45%, #78900b 45%,
#78900b 50%, #7a64e9 50%,
#7a64e9 55%, #78900b 55%,
#78900b 60%, #7a64e9 60%,
#7a64e9 65%, #78900b 65%,
#78900b 70%, #7a64e9 70%,
#7a64e9 75%, #78900b 75%,
#78900b 80%, #7a64e9 80%,
#7a64e9 85%, #78900b 85%,
#78900b 90%, #7a64e9 90%,
#7a64e9 95%, #78900b 95%,
#78900b 100%);
}
#screen-wrap .backdrop div:nth-child(1),
#screen-wrap .backdrop div:nth-child(17) {
box-shadow:
inset 0 2.5vw 0 0 #7a7a7a;
}
#screen-wrap .backdrop div:nth-child(205),
#screen-wrap .backdrop div:nth-child(221) {
box-shadow:
inset 0 -2.5vw 0 0 #7a7a7a;
}
/* center */
#screen-wrap .center div:nth-child(25),
#screen-wrap .center div:nth-child(26),
#screen-wrap .center div:nth-child(27),
#screen-wrap .center div:nth-child(38),
#screen-wrap .center div:nth-child(39),
#screen-wrap .center div:nth-child(47),
#screen-wrap .center div:nth-child(48) {
background: #000
}
#screen-wrap .center div:nth-child(24),
#screen-wrap .center div:nth-child(46) {
box-shadow:
inset -2.5vw 0 0 0 #000;
}
#screen-wrap .center div:nth-child(28),
#screen-wrap .center div:nth-child(40) {
box-shadow:
inset 2.5vw 0 0 0 #000;
}
/* 2 */
#screen-wrap .center div:nth-child(55),
#screen-wrap .center div:nth-child(56),
#screen-wrap .center div:nth-child(57),
#screen-wrap .center div:nth-child(58),
#screen-wrap .center div:nth-child(59),
#screen-wrap .center div:nth-child(60),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(62),
#screen-wrap .center div:nth-child(63),
#screen-wrap .center div:nth-child(64),
#screen-wrap .center div:nth-child(65) {
background: #bfbfbf;
}
/*
#screen-wrap .center div:nth-child(55),
#screen-wrap .center div:nth-child(56),
#screen-wrap .center div:nth-child(57),
#screen-wrap .center div:nth-child(58),
#screen-wrap .center div:nth-child(59),
#screen-wrap .center div:nth-child(60),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(62),
#screen-wrap .center div:nth-child(63),
#screen-wrap .center div:nth-child(64),
#screen-wrap .center div:nth-child(65) {
box-shadow:
inset 2.5vw 0 0 0 #000;
}
*/
#screen-wrap .center div:nth-child(65),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(57) {
box-shadow:
inset 2.5vw 0 0 0 #000;
}
#screen-wrap .center div:nth-child(64),
#screen-wrap .center div:nth-child(60),
#screen-wrap .center div:nth-child(56) {
box-shadow:
inset -1vw 0 0 0 #000,
inset 1vw 0 0 0 #000;
}
#screen-wrap .center div:nth-child(55),
#screen-wrap .center div:nth-child(63),
#screen-wrap .center div:nth-child(59) {
box-shadow:
inset -2.5vw 0 0 0 #000;
}
#screen-wrap .center div:nth-child(62),
#screen-wrap .center div:nth-child(58) {
box-shadow:
inset 1vw 0 0 0 #bfbfbf,
inset 4.5vw 0 0 0 #000;
}
/* center borders 1 & 2 */
#screen-wrap .center div:nth-child(25),
#screen-wrap .center div:nth-child(26),
#screen-wrap .center div:nth-child(27),
#screen-wrap .center div:nth-child(39),
#screen-wrap .center div:nth-child(40),
#screen-wrap .center div:nth-child(47),
#screen-wrap .center div:nth-child(56),
#screen-wrap .center div:nth-child(60),
#screen-wrap .center div:nth-child(64) {
border-left-color: #000;
border-right-color: #000
}
#screen-wrap .center div:nth-child(24),
#screen-wrap .center div:nth-child(38),
#screen-wrap .center div:nth-child(46),
#screen-wrap .center div:nth-child(55),
#screen-wrap .center div:nth-child(59),
#screen-wrap .center div:nth-child(63) {
border-right-color: #000
}
#screen-wrap .center div:nth-child(28),
#screen-wrap .center div:nth-child(41),
#screen-wrap .center div:nth-child(48),
#screen-wrap .center div:nth-child(57),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(65) {
border-left-color: #000
}
#screen-wrap .center div:nth-child(38),
#screen-wrap .center div:nth-child(39),
#screen-wrap .center div:nth-child(40),
#screen-wrap .center div:nth-child(46),
#screen-wrap .center div:nth-child(47),
#screen-wrap .center div:nth-child(48) {
border-bottom-color: #000;
}
#screen-wrap .center div:nth-child(55),
#screen-wrap .center div:nth-child(56),
#screen-wrap .center div:nth-child(57),
#screen-wrap .center div:nth-child(58),
#screen-wrap .center div:nth-child(59),
#screen-wrap .center div:nth-child(60),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(62),
#screen-wrap .center div:nth-child(63),
#screen-wrap .center div:nth-child(64),
#screen-wrap .center div:nth-child(65) {
border-top-color: #000;
border-bottom-color: #bfbfbf;
}
#screen-wrap .center div:nth-child(41),
#screen-wrap .center div:nth-child(42),
#screen-wrap .center div:nth-child(43),
#screen-wrap .center div:nth-child(44),
#screen-wrap .center div:nth-child(45) {
border-bottom-color: #bfbfbf;
}
#screen-wrap .center div:nth-child(57),
#screen-wrap .center div:nth-child(58),
#screen-wrap .center div:nth-child(61),
#screen-wrap .center div:nth-child(62) {
border-right-color: #bfbfbf;
}
#screen-wrap .center div:nth-child(58),
#screen-wrap .center div:nth-child(59),
#screen-wrap .center div:nth-child(62),
#screen-wrap .center div:nth-child(63) {
border-left-color: #bfbfbf;
}
/* 3 */
#screen-wrap .center div:nth-child(71),
#screen-wrap .center div:nth-child(72),
#screen-wrap .center div:nth-child(73),
#screen-wrap .center div:nth-child(88),
#screen-wrap .center div:nth-child(89),
#screen-wrap .center div:nth-child(90) {
background: #bebf00
}
#screen-wrap .center div:nth-child(74),
#screen-wrap .center div:nth-child(75),
#screen-wrap .center div:nth-child(91),
#screen-wrap .center div:nth-child(92) {
background: #05bfc0
}
#screen-wrap .center div:nth-child(76),
#screen-wrap .center div:nth-child(93) {
background: #00bf01
}
#screen-wrap .center div:nth-child(77) {
background: #00bf01;
box-shadow:
inset -2.5vw 0 0 0 #bf01bf;
}
#screen-wrap .center div:nth-child(78),
#screen-wrap .center div:nth-child(95) {
background: #bf01bf
}
#screen-wrap .center div:nth-child(79),
#screen-wrap .center div:nth-child(80),
#screen-wrap .center div:nth-child(96),
#screen-wrap .center div:nth-child(97) {
background: #be0301
}
#screen-wrap .center div:nth-child(81),
#screen-wrap .center div:nth-child(82),
#screen-wrap .center div:nth-child(83),
#screen-wrap .center div:nth-child(98),
#screen-wrap .center div:nth-child(99),
#screen-wrap .center div:nth-child(100) {
background: #0c00bf
}
/* center borders 3 */
#screen-wrap .center div:nth-child(71),
#screen-wrap .center div:nth-child(72),
#screen-wrap .center div:nth-child(73), #screen-wrap .center div:nth-child(88), #screen-wrap .center div:nth-child(89),
#screen-wrap .center div:nth-child(90) {
border-color: #bebf00
}
#screen-wrap .center div:nth-child(74),
#screen-wrap .center div:nth-child(75),
#screen-wrap .center div:nth-child(91),
#screen-wrap .center div:nth-child(92) {
border-color: #05bfc0
}
#screen-wrap .center div:nth-child(76),
#screen-wrap .center div:nth-child(93) {
border-color: #00bf01;
}
#screen-wrap .center div:nth-child(77) {
border-left-color: #00bf01;
border-top-color: #00bf01;
border-right-color: #bf01bf;
border-bottom-color: #000;
}
#screen-wrap .center div:nth-child(78),
#screen-wrap .center div:nth-child(95) {
border-color: #bf01bf
}
#screen-wrap .center div:nth-child(79),
#screen-wrap .center div:nth-child(80),
#screen-wrap .center div:nth-child(96),
#screen-wrap .center div:nth-child(97) {
border-color: #be0301
}
#screen-wrap .center div:nth-child(81),
#screen-wrap .center div:nth-child(82),
#screen-wrap .center div:nth-child(83),
#screen-wrap .center div:nth-child(98),
#screen-wrap .center div:nth-child(99),
#screen-wrap .center div:nth-child(100) {
border-color: #0c00bf
}
/* 4 */
#screen-wrap .center div:nth-child(105),
#screen-wrap .center div:nth-child(106),
#screen-wrap .center div:nth-child(107),
#screen-wrap .center div:nth-child(108),
#screen-wrap .center div:nth-child(109),
#screen-wrap .center div:nth-child(110),
#screen-wrap .center div:nth-child(111),
#screen-wrap .center div:nth-child(112),
#screen-wrap .center div:nth-child(113),
#screen-wrap .center div:nth-child(114),
#screen-wrap .center div:nth-child(115),
#screen-wrap .center div:nth-child(116),
#screen-wrap .center div:nth-child(117) {
background: #000;
border-top-color: #000;
border-bottom-color: #000;
box-shadow:
inset 0 2.3vw 0 0 #000,
inset 0 2.7vw 0 0 #fff;
}
#screen-wrap .center div:nth-child(94),
#screen-wrap .center div:nth-child(128) {
border-color: #000;
background: #000
}
#screen-wrap .center div:nth-child(94),
#screen-wrap .center div:nth-child(128) {
box-shadow:
inset 2.3vw 0 0 0 #000,
inset 2.7vw 0 0 0 #fff;
}
#screen-wrap .center div:nth-child(111)::after {
content:'';
display: block;
width:.3vw;
background: white;
margin-left:2.3vw
}
/* 5 */
#screen-wrap .center div:nth-child(122),
#screen-wrap .center div:nth-child(134),
#screen-wrap .center div:nth-child(139),
#screen-wrap .center div:nth-child(151),
#screen-wrap .center div:nth-child(123),
#screen-wrap .center div:nth-child(140) {
background: #000;
border-color: #000;
}
#screen-wrap .center div:nth-child(123),
#screen-wrap .center div:nth-child(140) {
box-shadow:
inset 2.5vw 0 2px 0 #000;
}
#screen-wrap .center div:nth-child(123),
#screen-wrap .center div:nth-child(140),
#screen-wrap .center div:nth-child(124),
#screen-wrap .center div:nth-child(141) {
border-right-color: #fff;
background-image: linear-gradient(90deg,
#fff 25%, #000000 25%,
#000000 50%, #fff 50%,
#fff 75%, #000000 75%,
#000000 100%);
filter: blur(1px);
}
#screen-wrap .center div:nth-child(123) {
border-bottom-color: #999;
}
#screen-wrap .center div:nth-child(140) {
border-top-color: #999;
}
#screen-wrap .center div:nth-child(140)::after,
#screen-wrap .center div:nth-child(150)::after {
content: '';
display: block;
width: 2.5vw;
height: 5px;
background: #000;
margin-top: -3px;
}
#screen-wrap .center div:nth-child(150)::after {
margin-left: 2.7vw;
}
#screen-wrap .center div:nth-child(124),
#screen-wrap .center div:nth-child(141),
#screen-wrap .center div:nth-child(125),
#screen-wrap .center div:nth-child(142),
#screen-wrap .center div:nth-child(126),
#screen-wrap .center div:nth-child(143),
#screen-wrap .center div:nth-child(127),
#screen-wrap .center div:nth-child(144),
#screen-wrap .center div:nth-child(145),
#screen-wrap .center div:nth-child(129),
#screen-wrap .center div:nth-child(146),
#screen-wrap .center div:nth-child(130),
#screen-wrap .center div:nth-child(147),
#screen-wrap .center div:nth-child(131),
#screen-wrap .center div:nth-child(148),
#screen-wrap .center div:nth-child(132),
#screen-wrap .center div:nth-child(149),
#screen-wrap .center div:nth-child(133),
#screen-wrap .center div:nth-child(150) {
border-color: #000;
border-top-color: #999;
border-bottom-color: #999;
}
#screen-wrap .center div:nth-child(125),
#screen-wrap .center div:nth-child(142) {
background-image: linear-gradient(90deg,
#fff 20%, #000000 20%,
#000000 45%, #fff 45%,
#ffffff 60%, #000000 60%,
#000000 75%, #ffffff 75%,
#ffffff 90%, #000000 90%,
#000000 100%);
filter: blur(1px);
}
#screen-wrap .center div:nth-child(126),
#screen-wrap .center div:nth-child(143) {
border-right-color: #fff;
background-image: linear-gradient(90deg,
#ffffff 15%, #000000 15%,
#000000 30%, #ffffff 30%,
#ffffff 45%, #000000 45%,
#000000 60%, #ffffff 60%,
#ffffff 75%, #000000 75%,
#000000 90%, #ffffff 90%);
filter: blur(.75px);
}
#screen-wrap .center div:nth-child(127),
#screen-wrap .center div:nth-child(144) {
border-right-color: #fff;
background-image: linear-gradient(90deg,
#000000 10%, #ffffff 10%,
#ffffff 25%, #000000 25%,
#000000 40%, #ffffff 40%,
#ffffff 50%, #000000 50%,
#000000 60%, #ffffff 60%,
#ffffff 70%, #000000 70%,
#000000 80%, #ffffff 80%,
#ffffff 90%, #000000 90%,
#000000 100%);
filter: blur(.5px);
}
#screen-wrap .center div:nth-child(145) {
border-left-color: #fff;
background-image: linear-gradient(90deg,
#000000 10%, #ffffff 10%,
#ffffff 20%, #000000 20%,
#000000 30%, #ffffff 30%,
#ffffff 40%, #000000 40%,
#000000 50%, #ffffff 50%,
#ffffff 60%, #000000 60%,
#000000 70%, #ffffff 70%,
#ffffff 80%, #000000 80%,
#000000 90%, #ffffff 90%,
#ffffff 100%);
filter: blur(.5px);
}
#screen-wrap .center div:nth-child(129),
#screen-wrap .center div:nth-child(146) {
background-image: linear-gradient(90deg,
#ffffff 12%, #000000 12%,
#000000 20%, #ffffff 20%,
#ffffff 30%, #000000 30%,
#000000 40%, #ffffff 40%,
#ffffff 50%, #000000 50%,
#000000 55%, #ffffff 55%,
#ffffff 60%, #000000 60%,
#000000 65%, #ffffff 65%,
#ffffff 70%, #000000 70%,
#000000 75%, #ffffff 75%,
#ffffff 80%, #000000 80%,
#000000 85%, #ffffff 85%,
#ffffff 90%, #000000 90%,
#000000 95%, #ffffff 95%,
#ffffff 100%);
filter: blur(.25px);
}
#screen-wrap .center div:nth-child(130),
#screen-wrap .center div:nth-child(147),
#screen-wrap .center div:nth-child(131),
#screen-wrap .center div:nth-child(148) {
border-right-color: #fff;
background-image: linear-gradient(90deg,
#ffffff 5%, #000000 5%,
#000000 10%, #ffffff 10%,
#ffffff 15%, #000000 15%,
#000000 20%, #ffffff 20%,
#ffffff 25%, #000000 25%,
#000000 30%, #ffffff 30%,
#ffffff 35%, #000000 35%,
#000000 40%, #ffffff 40%,
#ffffff 45%, #000000 45%,
#000000 50%, #ffffff 50%,
#ffffff 55%, #000000 55%,
#000000 60%, #ffffff 60%,
#ffffff 65%, #000000 65%,
#000000 70%, #ffffff 70%,
#ffffff 75%, #000000 75%,
#000000 80%, #ffffff 80%,
#ffffff 85%, #000000 85%,
#000000 90%, #ffffff 90%,
#ffffff 95%, #000000 95%,
#000000 100%);
filter: blur(.25px);
}
#screen-wrap .center div:nth-child(132),
#screen-wrap .center div:nth-child(149),
#screen-wrap .center div:nth-child(133),
#screen-wrap .center div:nth-child(150) {
background-image: linear-gradient(90deg,
#ffffff 3%, #000000 3%,
#000000 6%, #ffffff 6%,
#ffffff 9%, #000000 9%,
#000000 12%, #ffffff 12%,
#ffffff 15%, #000000 15%,
#000000 18%, #ffffff 18%,
#ffffff 21%, #000000 21%,
#000000 24%, #ffffff 24%,
#ffffff 27%, #000000 27%,
#000000 30%, #ffffff 30%,
#ffffff 33%, #000000 33%,
#000000 36%, #ffffff 36%,
#ffffff 39%, #000000 39%,
#000000 42%, #ffffff 42%,
#ffffff 45%, #000000 45%,
#000000 48%, #ffffff 48%,
#ffffff 51%, #000000 51%,
#000000 54%, #ffffff 54%,
#ffffff 57%, #000000 57%,
#000000 60%, #ffffff 60%,
#ffffff 63%, #000000 63%,
#000000 66%, #ffffff 66%,
#ffffff 69%, #000000 69%,
#000000 72%, #ffffff 72%,
#ffffff 75%, #000000 75%,
#000000 78%, #ffffff 78%,
#ffffff 81%, #000000 81%,
#000000 84%, #ffffff 84%,
#ffffff 87%, #000000 87%,
#000000 90%, #ffffff 90%,
#ffffff 93%, #000000 93%,
#000000 96%, #ffffff 96%,
#ffffff 99%);
filter: blur(.10px);
}
#screen-wrap .center div:nth-child(133) {
border-top-color: #000;
}
#screen-wrap .center div:nth-child(133),
#screen-wrap .center div:nth-child(150) {
border-left-color: #999;
box-shadow:
inset -2.5vw 0 0 0 #000;
}
/* 6 */
#screen-wrap .center div:nth-child(157) {
background: #000;
border-color: #000;
}
#screen-wrap .center div:nth-child(158) {
box-shadow:
inset 2.5vw 0 0 0 #000;
border-color: #333;
background: #333
}
#screen-wrap .center div:nth-child(159) {
border-color: #333;
background: #333
}
#screen-wrap .center div:nth-child(160) {
box-shadow:
inset 2.5vw 0 0 0 #333;
border-color: #333;
border-right-color: #666;
background: #666
}
#screen-wrap .center div:nth-child(161) {
border-color: #666;
background: #666
}
#screen-wrap .center div:nth-child(162) {
box-shadow:
inset 2.5vw 0 0 0 #666;
border-color: #666;
border-right-color: #999;
background: #999
}
#screen-wrap .center div:nth-child(163) {
background: #999;
border-color: #999;
}
#screen-wrap .center div:nth-child(164) {
box-shadow:
inset 2.5vw 0 0 0 #999;
border-color: #999;
border-right-color: #ccc;
background: #ccc
}
#screen-wrap .center div:nth-child(165) {
background: #ccc;
border-color: #ccc;
}
#screen-wrap .center div:nth-child(166) {
box-shadow:
inset 2.5vw 0 0 0 #ccc;
border-color: #ccc;
border-right-color: #fff;
border-bottom-color: #fff;
}
#screen-wrap .center div:nth-child(167) {
border-top-color: #ccc;
}
/* 7 */
#screen-wrap .center div:nth-child(174),
#screen-wrap .center div:nth-child(175) {
border-top-color: #333;
}
#screen-wrap .center div:nth-child(176) {
box-shadow:
inset -2.5vw 0 0 0 #000;
border-top-color: #333;
}
#screen-wrap .center div:nth-child(177) {
background: #000;
border-top-color: #333;
border-right-color: #000;
}
#screen-wrap .center div:nth-child(178),
#screen-wrap .center div:nth-child(179),
#screen-wrap .center div:nth-child(180),
#screen-wrap .center div:nth-child(181) {
background: #000;
border-top-color: #333;
border-left-color: #000;
border-right-color: #000;
}
#screen-wrap .center div:nth-child(182) {
box-shadow:
inset 2.5vw 0 0 0 #000;
border-left-color: #000;
border-top-color: rgba(0,0,0,0);
}
#screen-wrap .center div:nth-child(182)::after {
content: '';
display: block;
width: 2.5vw;
height:2px;
background: #000;
margin-top:-1px;
}
#screen-wrap .center div:nth-child(175),
#screen-wrap .center div:nth-child(176),
#screen-wrap .center div:nth-child(177),
#screen-wrap .center div:nth-child(178),
#screen-wrap .center div:nth-child(180),
#screen-wrap .center div:nth-child(181),
#screen-wrap .center div:nth-child(182),
#screen-wrap .center div:nth-child(183) {
border-bottom-color: #bebf00;
}
#screen-wrap .center div:nth-child(179) {
border-bottom-color: #be0301;
}
/* 8 */
#screen-wrap .center div:nth-child(192),
#screen-wrap .center div:nth-child(193),
#screen-wrap .center div:nth-child(194),
#screen-wrap .center div:nth-child(195),
#screen-wrap .center div:nth-child(197),
#screen-wrap .center div:nth-child(198),
#screen-wrap .center div:nth-child(199),
#screen-wrap .center div:nth-child(200),
#screen-wrap .center div:nth-child(211),
#screen-wrap .center div:nth-child(212),
#screen-wrap .center div:nth-child(214),
#screen-wrap .center div:nth-child(215) {
background: #bebf00;
border-color: #bebf00;
}
#screen-wrap .center div:nth-child(196),
#screen-wrap .center div:nth-child(213) {
background: #be0301;
border-color: #be0301;
}
</style>
<script>
(function() {
"use strict";
var canvas = document.querySelector("#tv"),
context = canvas.getContext("gl") || canvas.getContext("2d"),
scaleFactor = 2.5, // Noise size
samples = [],
sampleIndex = 0,
scanOffsetY = 0,
scanSize = 0,
FPS = 50,
scanSpeed = FPS * 15, // 15 seconds from top to bottom
SAMPLE_COUNT = 10;
window.onresize = function() {
canvas.width = canvas.offsetWidth / scaleFactor;
canvas.height = canvas.width / (canvas.offsetWidth / canvas.offsetHeight);
scanSize = (canvas.offsetHeight / scaleFactor) / 3;
samples = []
for(var i = 0; i < SAMPLE_COUNT; i++)
samples.push(generateRandomSample(context, canvas.width, canvas.height));
};
function interpolate(x, x0, y0, x1, y1) {
return y0 + (y1 - y0)*((x - x0)/(x1 - x0));
}
function generateRandomSample(context, w, h) {
var intensity = [];
var random = 0;
var factor = h / 50;
var trans = 1 - Math.random() * 0.05;
var intensityCurve = [];
for(var i = 0; i < Math.floor(h / factor) + factor; i++)
intensityCurve.push(Math.floor(Math.random() * 15));
for(var i = 0; i < h; i++) {
var value = interpolate((i/factor), Math.floor(i / factor), intensityCurve[Math.floor(i / factor)], Math.floor(i / factor) + 1, intensityCurve[Math.floor(i / factor) + 1]);
intensity.push(value);
}
var imageData = context.createImageData(w, h);
for(var i = 0; i < (w * h); i++) {
var k = i * 4;
var color = Math.floor(36 * Math.random());
// Optional: add an intensity curve to try to simulate scan lines
color += intensity[Math.floor(i / w)];
imageData.data[k] = imageData.data[k + 1] = imageData.data[k + 2] = color;
imageData.data[k + 3] = Math.round(255 * trans);
}
return imageData;
}
function render() {
context.putImageData(samples[Math.floor(sampleIndex)], 0, 0);
sampleIndex += 20 / FPS; // 1/FPS == 1 second
if(sampleIndex >= samples.length) sampleIndex = 0;
var grd = context.createLinearGradient(0, scanOffsetY, 0, scanSize + scanOffsetY);
grd.addColorStop(0, 'rgba(255,255,255,0)');
grd.addColorStop(0.1, 'rgba(255,255,255,0)');
grd.addColorStop(0.2, 'rgba(255,255,255,0.2)');
grd.addColorStop(0.3, 'rgba(255,255,255,0.0)');
grd.addColorStop(0.45, 'rgba(255,255,255,0.1)');
grd.addColorStop(0.5, 'rgba(255,255,255,1.0)');
grd.addColorStop(0.55, 'rgba(255,255,255,0.55)');
grd.addColorStop(0.6, 'rgba(255,255,255,0.25)');
//grd.addColorStop(0.8, 'rgba(255,255,255,0.15)');
grd.addColorStop(1, 'rgba(255,255,255,0)');
context.fillStyle = grd;
context.fillRect(0, scanOffsetY, canvas.width, scanSize + scanOffsetY);
context.globalCompositeOperation = "lighter";
scanOffsetY += (canvas.height / scanSpeed);
if(scanOffsetY > canvas.height) scanOffsetY = -(scanSize / 2);
window.requestAnimationFrame(render);
}
window.onresize();
window.requestAnimationFrame(render);
})();
</script>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-60299961819207322512023-01-01T02:56:00.008-08:002023-01-01T02:58:35.829-08:00CSS Sunshine
<div style="display:none">
<img alt="" border="0" width="400" data-original-height="1554" data-original-width="2554" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8kJTl0qmOT16nsoe7MO2NePsPTfqX5XmjmaVUSj3SzZVu6BeqhIurYPz5IrG-ZUuYErJHuWKcIPPTTAG4apNCfu3XXqcNS42by0vWmpr-Ns1-dlZ5uU8TELegwZZrZCEnWZvYuFNsA8ArZ7yYGpPiBCOQ-YFCDUEQiI0qVJFOT_n8v9IxZqJQz0vBRQ/s400/CSS_Sunshine-FlyBirdsBOX.png"/></div>
<span><a name='more'></a></span>
<!--
<div class="separator" style="clear: both;"><a href="https://codepen.io/FlyBirds-Box/pen/NWzZegP" target="_blank"><img alt="" border="0" data-original-height="128" data-original-width="2223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpsyUNYJgLuIz6wkHM9tB5HNWR2RnQCiRLuFPr75wiNem2pp5rPGgKfn-MnfL_4UY4khHJrJmeMfK5S-c7Gq2Uih3wI4uf2jpYNrBvcgryw8zj-5QP2tyDZnO0nClGvjVOM73xfjuSUDBgHnNtahSFrXACgvhvxJg0x6qYc5P2TT8f_-VB1Qa6fnBcA/s1600/picked_by_CodePen.jpg"/></a></div>
-->
<div class="static-border">
<div class="sun-bg">
<div class="sun-wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<style>
.sun-bg {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgb(2, 0, 36);
background: radial-gradient(
circle,
rgba(0, 212, 255, 1) 0%,
rgba(2, 0, 36, 1) 100%
);
}
.sun-wrap {
background: none;
width: 300px;
max-width: 90%;
height: 300px;
margin: 10% auto;
display: block;
border-radius: 100%;
}
.sun-wrap ul {
width: 100px;
height: 100px;
border: 5px double #ffb23d;
margin: 75px auto 0 !important;
padding: 0 !important;
border-radius: 100%;
position: relative;
z-index: 1;
background: radial-gradient(
ellipse at center,
#f90 0%,
#cf1717 60%,
#ff0 100%
);
animation: spin 10s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite,
sunflash 2s infinite linear alternate;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(200deg) scale(1.3);
transform: rotate(200deg) scale(1.3);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes sunflash {
0% {
box-shadow: inset 0 0 24px 75px #ee6507, 0 0 0 0 #f90,
0px 0px 250px 50px rgba(2, 0, 36, 1);
}
100% {
box-shadow: inset 0px 0 0 0 #f90, 0 0 5px 2px #fc0,
0px 0px 250px 50px rgba(2, 0, 36, 1);
}
}
.sun-wrap li {
position: absolute;
list-style: none;
width: 0;
height: 0;
/* animation: sun 8s cubic-bezier(0, 0.65, 0.2, 1.54) infinite;*/
/* animation: sun 8s cubic-bezier(0.14, 0.7, 0.13, 1.34) 1s infinite;*/
animation: sun 8s cubic-bezier(0.68, 0.9, 0, 1.39) infinite;
}
.sun-wrap li:first-child {
top: -30px;
left: -20px;
transform: rotate(45deg);
}
.sun-wrap li:nth-child(2n) {
top: 25px;
left: -40px;
}
.sun-wrap li:nth-child(3n) {
top: 80px;
left: -20px;
transform: rotate(-45deg);
}
.sun-wrap li:nth-child(4n) {
top: 100px;
left: 35px;
transform: rotate(-90deg);
}
.sun-wrap li:nth-child(5n) {
top: 80px;
left: 90px;
transform: rotate(224deg);
}
.sun-wrap li:nth-child(6n) {
top: 25px;
left: 110px;
transform: rotate(180deg);
}
.sun-wrap li:nth-child(7n) {
top: -30px;
left: 90px;
transform: rotate(135deg);
}
.sun-wrap li:nth-child(8n) {
top: -50px;
left: 35px;
transform: rotate(90deg);
}
.sun-wrap li::before {
content: "";
display: block;
width: 1px;
height: 1px;
background: #ffb23d;
border-radius: 100%;
z-index: -1;
box-shadow: -10px 10px 4px 5px #ffb23d, 0 100px 3px 4px #ffb23d,
220px -140px 2px 3px #ffb23d, 290px -150px 1px 2px #ffb23d,
150px 150px 5px 2px #ffb23d, 100px -100px 5px 2px #ffb23d,
50px 50px 5px 2px #ffb23d;
}
@keyframes sun {
0% {
border-right: 20px solid #ffb23d;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: 0;
box-shadow: 10px -0px 5px -5px #cf1717,
15px 0px 15px -2px rgba(2, 0, 36, 0.25);
}
5% {
/*red cienkie male*/
border-right: 5px solid #cf1717;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: 10px;
}
11% {
border-right: 20px solid #cf1717;
border-bottom: solid 2px transparent;
border-top: solid 20px transparent;
margin-top: 10px;
margin-left: 0;
box-shadow: 10px 15px 5px -6px #ffb23d;
}
22% {
border-right: 3px solid #cf1717;
border-bottom: solid 100px transparent;
border-top: solid 0px transparent;
margin-top: -30px;
margin-left: 10px;
box-shadow: -100px -100px 1px 0px #ffb23d, -100px 100px 1px 0px #ffb23d;
}
33% {
border-right: 2px solid #cd1e13;
border-bottom: solid 100px transparent;
border-top: solid 100px transparent;
margin-top: -80px;
margin-left: 10px;
box-shadow: -50px -50px 1px 0px #ffb23d, -50px 50px 1px 0px #ffb23d;
}
44% {
border-right: 20px solid #ffb23d;
border-bottom: solid 100px transparent;
border-top: solid 20px transparent;
margin-top: -40px;
margin-left: 0;
box-shadow: 5px 0px 5px -2px #cf1717, 15px 0px 15px -5px rgba(2, 0, 36, 0.25);
}
50% {
border-right: 20px solid #ffb23d;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: 0;
box-shadow: 10px -0px 15px 5px #ffb23d, 15px 0px 5px 0px #cf1717;
}
63% {
border-right: 20px solid #ef8424;
border-bottom: solid 100px transparent;
border-top: solid 100px transparent;
margin-top: -80px;
margin-left: 0px;
box-shadow: 15px 0px 15px 5px #ffb23d, 10px 0px 15px 3px #ffb23d,
15px 0px 10px 1px #cf1717;
}
70% {
border-right: 20px solid #cf1717;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: 0;
box-shadow: 10px 0px 15px -5px rgba(2, 0, 36, 0.25);
}
80% {
border-right: 100px solid #ffb23d;
border-bottom: solid 100px transparent;
border-top: solid 100px transparent;
margin-top: -70px;
margin-left: -40px;
box-shadow: 0px 0px 1px 1px #ffb23d;
}
90% {
border-right: 100px solid #ffb23d;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: -40px;
box-shadow: 15px 0px 15px 5px #ffb23d;
}
100% {
border-right: 20px solid #ffb23d;
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
margin-top: 0px;
margin-left: 0;
box-shadow: 10px -0px 5px -5px #cf1717,
15px 0px 15px -2px rgba(2, 0, 36, 0.25);
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-47499688983158668982022-12-22T05:51:00.022-08:002022-12-22T08:19:54.864-08:00CSS Wind
<div style="display:none">
<img alt="" border="0" width="320" data-original-height="921" data-original-width="1040" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkqHw9oijBDJkxPRdquf64cfqOMSeo6w0jlFwAcuABjpVcufg0weOOl9BR0gU6G-6wHolbDi97LRrIAVDstAeKVatLUmt_-P38BWnZHOQJBEMJ1umVFMWZzYan3NHHpcqTgC0LnEUz_yPS6suI5vODkZeyJreQuFYcr2Q5JUbLnD-uOgzkF_V78pNdQ/s1600/CSS_Wind-FlyBirdsBOX.jpg"/>
</div>
<span><a name='more'></a></span>
<!--
<div class="separator" style="clear: both;"><a href="https://codepen.io/FlyBirds-Box/pen/NWzZegP" target="_blank"><img alt="" border="0" data-original-height="128" data-original-width="2223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpsyUNYJgLuIz6wkHM9tB5HNWR2RnQCiRLuFPr75wiNem2pp5rPGgKfn-MnfL_4UY4khHJrJmeMfK5S-c7Gq2Uih3wI4uf2jpYNrBvcgryw8zj-5QP2tyDZnO0nClGvjVOM73xfjuSUDBgHnNtahSFrXACgvhvxJg0x6qYc5P2TT8f_-VB1Qa6fnBcA/s1600/picked_by_CodePen.jpg"/></a></div>
-->
<div class="static-border">
<div id="wind-wrap">
<div class="tree"></div>
<div class="grass"></div>
<ul class="leaf-wrap">
<li class="leaf"></li>
<li class="leaf"></li>
<li class="leaf"></li>
<li class="leaf"></li>
<li class="leaf"></li>
</ul>
</div>
</div>
<style>
#wind-wrap {
position: relative;
margin: 0px auto;
padding: 0;
width: 100%;
height: 500px;
overflow: hidden;
background: #fff;
border: 20px solid white;
background: linear-gradient(126deg, rgb(45 253 226 / 77%) 0%, rgb(156 255 230 / 59%) 33%, rgb(255 245 204 / 17%) 100%)
}
.tree {
position: relative;
z-index: 1;
width: 250px;
height: 250px;
margin-top: 110px;
margin-left: -60px;
border-radius: 85% 75% 0% 75%;
background: linear-gradient(to right, #53ad71, #77ed9e);
transform: rotate(-130deg);
box-shadow: inset 5px -5px 30px 5px #3a9659, -7px 5px 0 1px #3f8456, -10px 30px 50px -20px #3a5d46;
}
.tree::after {
content: '';
display: block;
width: 55px;
height: 220px;
border: 20px solid #623204;
border-bottom: none;
border-right: none;
border-top: none;
border-radius: 100% 100% 100% 10%;
transform: rotate(128deg);
position: absolute;
top: -30px;
left: 5px;
box-shadow: inset -30px -60px 0px -30px #623204, -30px -60px 0px -30px #623204, -30px -55px 33px -25px #3a5d46;
}
.tree::before {
content: '';
display: block;
width: 30px;
height: 30px;
background: none;
border-radius: 100% 100% 100% 10%;
transform: rotate(-60deg);
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
box-shadow:
-40px 233px 0 -8px #53ad71,
-70px 263px 0 -10px #53ad71,
-80px 243px 0 -12px #53ad71,
-95px 255px 0 -13px #53ad71,
-60px 185px 0px 1px #53ad71, -63px 186px 0px 1px #77ed9e, -68px 189px 10px 1px #2c653f,
-72px 207px 0px -2px #77ed9e, -75px 209px 10px 0px #2c653f,
-80px 185px 0 10px #3a9659, -84px 186px 0 10px #2c653f, -90px 189px 10px 10px #3f8456,
-85px 140px 0px 2px #77ed9e, -90px 141px 0px 2px #3f8456, -93px 143px 10px 2px #2c653f,
-96px 115px 0px 20px #53ad71, -101px 115px 0px 20px #3f8456, -105px 117px 15px 18px #3a5d46,
-150px 165px 0 -10px #53ad71,
-130px 165px 0 -11px #53ad71,
-140px 185px 0 -12px #53ad71,
-140px 165px 0px 25px #77ed9e, -145px 167px 0px 25px #3f8456, -149px 170px 15px 23px #3a5d46;
animation: 2.5s ease-in-out 0s infinite tree;
}
@keyframes tree {
0%, 100% {
transform: rotate(-60deg);
}
50% {
transform: rotate(-62deg);
}
}
.grass {
position: absolute;
bottom: -45px;
left: 0px;
height: 100px;
width: 200px;
border-radius: 0 100% 0 0;
background-color: #3f8456;
box-shadow:
inset -10px 10px 20px 10px #3a5d46,
0 0 0px 3px #3a5d46, 100px 25px 0px 3px #3a5d46,
85px 0px 15px -3px #3f8456,
100px -5px 0px 10px #3a5d46,
-50px -10px 0px 30px #3b5243, inset 0px 0px 50px -10px #77ed9e,
0px 0px 150px -10px red,
80px -100px 150px 50px rgb(253 187 45)
}
ul.leaf-wrap {
list-style: none;
position: absolute;
height: 50px;
width: 100%;
top: 150px;
z-index: 0;
animation: 1.5s ease-in 0s 1 fade-in;
}
@keyframes fade-in {
0% {
left:-50px;
opacity: 0;
}
100% {
left:0;
opacity: 1
}
}
.leaf {
position: absolute;
z-index: 0;
width: 50px;
height: 50px;
border-radius: 75% 75% 0% 75%;
background: linear-gradient(to right, #77ed9e, #53ad71);
box-shadow: 8px 10px 20px -10px #3a5d46, 2px -1px 0 1px #3f8456,
200px -100px 15px -15px #77ed9e, 200px -100px 0 -10px #3f8456,
-140px 65px 15px -20px #77ed9e, -140px 65px 0px -13px #3f8456,
140px 65px 0px -15px #77ed9e ;
}
.leaf::after {
content: '';
display: block;
width: 15px;
height: 50px;
border: 4px solid #3a9659;
border-bottom: none;
border-right: none;
border-top: none;
border-radius: 100% 100% 100% 10%;
transform: rotate(120deg);
position: absolute;
top: -3px;
left: 5px;
}
.leaf::before {
content: '';
display: block;
width: 3px;
height: 3px;
background: none;
border-radius: 100% 100% 100% 10%;
transform: rotate(0deg);
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
box-shadow: 10px 15px 0 1px #3a9659, 10px 18px 0 1px #53ad71, 20px 11px 0 1px #3a9659, 23px 11px 0 1px #53ad71, 20px 20px 0 1px #3a9659;
}
.leaf:nth-child(1) {
animation: 3s ease-in 0s infinite leaf-1;
}
@keyframes leaf-1 {
0% {
left:-150px;
transform: scale3d(1, 1, 1);
}
75% {
transform: scale3d(1, .75, 1) translate(100px, 100px);
}
100% {
left:100%;
transform: scale3d(1, 1, 1) translate(20px, -20px) rotate(-50deg);
}
}
.leaf:nth-child(2) {
animation: 2.5s ease-in 0.5s infinite leaf-2;
}
@keyframes leaf-2 {
0% {
left:-50px;
transform: scale3d(.5, .5, .5);
}
60% {
transform: scale3d(.75, .25, .5) translate(100px, -150px);
}
100% {
left:100%;
transform: scale3d(.5, .5, .5) translate(0px, -20px);
}
}
.leaf:nth-child(3) {
animation: 3.5s ease-in 0.75s infinite leaf-3;
}
@keyframes leaf-3 {
0% {
left:-50px;
transform: scale3d(1, .5, .5);
}
30% {
transform: scale3d(.25, .65, .5) translate(100px, 100px) rotate(-30deg) ;
}
100% {
left:100%;
transform: scale3d(1, .5, .5) translate(100px, -200px);
}
}
.leaf:nth-child(4) {
animation: 4.5s ease-in 0s infinite leaf-4;
}
@keyframes leaf-4 {
0% {
left:-150px;
transform: rotate(0deg) scale(.6);
}
20% {
transform: rotate(5deg) translate(0, 50px);
}
100% {
left:100%;
transform: rotate(90deg) translate(0px, -400px) scale(1);
}
}
.leaf:nth-child(5) {
animation: 5.5s ease-in 0.5s infinite leaf-5;
}
@keyframes leaf-5 {
0% {
left:-150px;
transform: rotate(0deg) scale(.5);
}
20% {
transform: translate(300px, 100px) rotate(90deg) scale(.6);
}
45% {
transform: translate(300px, 0px) rotate(0deg) scale(.85);
}
70% {
transform: translate(300px, 250px) rotate(-180deg) scale(.6);
}
100% {
left:100%;
transform: rotate(-200deg) translate(-100px, -200px) scale(1);
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com1tag:blogger.com,1999:blog-3430062488078322418.post-47644233911482247782022-12-14T05:03:00.019-08:002022-12-24T04:59:50.180-08:00CSS Deluge
<div style="display:none">
<img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDivqO9psfI0AJMK7KH4MEptKaovpAqwKQSB20kKFgH-rqFoBjGZvhjMUiRy6TMm88D35rntMHEOU6M6V10RY1xH2eg8ey5ami5-Duc98545zguCahIPqSPnIcE1Hs4asRVkHlFpeBrv8LcY5saJfkctfp-YQv0c20sfZns0_DHpNW9zNMpb5abx2ZhA/s1600/CSS-Deluge-FlyBirdsBOX.jpg"/>
</div>
<span><a name='more'></a></span>
<!--
<div class="separator" style="clear: both;"><a href="https://codepen.io/FlyBirds-Box/pen/NWzZegP" target="_blank"><img alt="" border="0" data-original-height="128" data-original-width="2223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpsyUNYJgLuIz6wkHM9tB5HNWR2RnQCiRLuFPr75wiNem2pp5rPGgKfn-MnfL_4UY4khHJrJmeMfK5S-c7Gq2Uih3wI4uf2jpYNrBvcgryw8zj-5QP2tyDZnO0nClGvjVOM73xfjuSUDBgHnNtahSFrXACgvhvxJg0x6qYc5P2TT8f_-VB1Qa6fnBcA/s1600/picked_by_CodePen.jpg"/></a></div>-->
<div class="static-border">
<div id="rain-wrap">
<ul class="dripdrop">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="rain">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="ocean">
<div class="splash-wrap">
<div class="splash"></div>
<ul class="particles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="splash splash-mini"></div>
</div>
</div>
</div>
</div>
<style>
.widget .post-body ul {
margin:0;
padding:0
}
#rain-wrap {
position: relative;
margin: 0px auto;
padding: 0;
width: 100%;
/*max-width: 1200px;*/
height: 100vh;
max-height: 500px;
overflow: hidden;
background: radial-gradient(circle at center center, #d9e7ee, #91a8b3);
/* background: #b7c1c6;*/
border: 2vw solid white;
}
/* ocean*/
.ocean {
width: 100%;
height: 120px;
bottom: -50px;
left: 0;
position: absolute;
z-index: 1;
background-color: white;
border-radius: 0 100% 0 0;
list-style: none;
}
.ocean::after,
.ocean::before {
content: "";
position: absolute;
bottom: 0px;
left: -10%;
width: 120%;
height: 150px;
border-radius: 20% 100% 0 0;
background-color: white;
animation: waves 10s ease infinite;
opacity: 0.5;
}
.ocean::before {
bottom: 0px;
height: 200px;
animation-delay: 5s;
opacity: 0.33;
left: -15%;
}
@keyframes waves {
0%,
100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}
/* drops*/
.dripdrop {
position: relative;
z-index: 1;
margin: 0 auto!important;
padding: 0!important;
top: 15px;
list-style: none;
width: 300px;
height: 300px;
}
.dripdrop::after {
content: "";
position: absolute;
width: 100px;
height: 70px;
background: white;
border-radius: 0% 0% 100% 100%;
top: -70px;
left: -50px;
/* box-shadow: -10px 0px 0 15px rgba(250,250,250,0.5), -15px 0px 0 25px rgba(250,250,250,0.25);*/
box-shadow: -10px 0px 0 15px rgba(250, 250, 250, 0.75);
animation: bg-pulp 7.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
.dripdrop::before {
content: "";
position: absolute;
width: 100px;
height: 70px;
background: white;
border-radius: 0% 0% 100% 100%;
top: -70px;
left: -10px;
/* box-shadow: 0px -10px 0 15px rgba(250,250,250,0.5), 0px -15px 0 25px rgba(250,250,250,0.25);*/
box-shadow: 0px -10px 0 15px rgba(250, 250, 250, 0.75);
animation: bg-pulp 5.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
@keyframes bg-pulp {
0% {
transform: rotate(-25deg) scale(1);
border-top-right-radius: 90%;
border-bottom-right-radius: 70%;
border-bottom-left-radius: 100%;
border-top-left-radius: 50%;
}
50% {
transform: rotate(50deg) scale(0.9);
border-top-right-radius: 70%;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 50%;
border-top-left-radius: 70%;
}
100% {
transform: rotate(0deg) scale(1.1);
border-top-right-radius: 100%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 80%;
border-top-left-radius: 70%;
}
}
.dripdrop li {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0px;
margin: 0 auto;
/* background: #758c97;*/
background: white;
border-radius: 100% 5% 100% 100%;
transform: rotate(-45deg);
animation: drip 5s cubic-bezier(1, 0, 0.91, 0.19) 0s infinite;
}
.dripdrop li::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: white;
border-radius: 100% 5% 100% 100%;
left: -5px;
top: -50px;
transform: rotate(0deg) scale(0.5);
animation-delay: 3.5s;
}
.dripdrop li::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 100% 5% 100% 100%;
left: 60px;
top: -30px;
transform: rotate(0deg) scale(0.5);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(2) {
left: 35px;
top: -50px;
transform: rotate(-45deg) scale(1.15);
animation-delay: 3s;
}
.dripdrop li:nth-child(2)::after {
left: -5px;
top: -50px;
transform: rotate(0deg) scale(0.5);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(2)::before {
left: 70px;
top: 50px;
transform: rotate(0deg) scale(0.5);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(3) {
left: 75px;
top: 0px;
margin-top: -10px;
transform: rotate(-45deg) scale(0.85);
animation-delay: 1.5s;
}
.dripdrop li:nth-child(3)::after {
left: -130px;
top: -150px;
transform: rotate(0deg) scale(1);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(3)::before {
left: -100px;
top: 0px;
margin-top: -150px;
transform: rotate(0deg) scale(1.1);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(4) {
left: -50px;
top: 0px;
margin-top: -15px;
transform: rotate(-45deg) scale(1.5);
animation-delay: 1s;
animation-duration: 5s;
}
.dripdrop li:nth-child(4)::after {
left: -25px;
top: -30px;
margin-top: 0;
transform: rotate(0deg) scale(0.3);
animation-delay: 3.5s;
}
.dripdrop li:nth-child(4)::before {
left: 10px;
top: -10px;
margin-top: -10px;
transform: rotate(0deg) scale(0.5);
animation-delay: 3.5s;
}
@keyframes drip {
0% {
top: -15px;
border-radius: 0% 100% 0% 100%;
}
50% {
top: -8px;
border-radius: 50% 100% 50% 100%;
}
70% {
border-radius: 100% 5% 100% 100%;
}
90% {
border-radius: 50% 80% 50% 100%;
}
100% {
top: 300px;
border-radius: 50% 80% 50% 100%;
}
}
/* rain*/
.rain {
position: absolute;
top: 0;
left: 50%;
transform: rotate(0deg);
color: #758c97;
opacity: 0.33;
}
.rain::before {
content: "";
background: none;
position: absolute;
top: 100px;
left: -200px;
width: 5px;
height: 5px;
border-radius: 100% 5% 100% 100%;
transform: rotate(0deg);
z-index: 0;
box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97,
50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97,
130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97,
-70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97,
-160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97,
-150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97,
-100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97,
-40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97,
40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97,
100px 150px 2px 0 #758c97, 140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 160px 140px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97, 180px 180px 2px 0 #758c97,
200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97,
250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97,
-200px 180px 2px 0 #758c97, -220px 185px 2px 0 #758c97,
-150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97,
-80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97,
-150px 350px 2px 0 #758c97, -250px 250px 2px 0 #758c97,
150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97;
animation: rain 2.5s linear infinite;
}
.rain::after {
content: "";
background: none;
position: absolute;
top: 0px;
left: 0px;
width: 5px;
height: 5px;
border-radius: 100% 5% 100% 100%;
transform: rotate(0deg);
z-index: 0;
box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97,
50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97,
130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97,
-70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97,
-160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97,
-150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97,
-100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97,
-40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97,
40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97,
100px 150px 2px 0 #758c97, 140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 160px 140px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97, 180px 180px 2px 0 #758c97,
200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97,
250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97,
-200px 180px 2px 0 #758c97, -220px 185px 2px 0 #758c97,
-150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97,
-80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97,
-150px 350px 2px 0 #758c97, -250px 250px 2px 0 #758c97,
150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97;
animation: rain 2.5s linear 0.75s infinite;
}
.rain li {
background: none;
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 5px;
border-radius: 100% 5% 100% 100%;
transform: rotate(-0deg);
z-index: 0;
box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97,
50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97,
130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97,
-70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97,
-160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97,
-150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97,
-100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97,
-40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97,
40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97,
100px 150px 2px 0 #758c97, 140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 160px 140px 2px 0 #758c97,
170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97, 180px 180px 2px 0 #758c97,
200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97,
250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97,
-200px 180px 2px 0 #758c97, -220px 185px 2px 0 #758c97,
-150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97,
-80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97,
-150px 350px 2px 0 #758c97, -250px 250px 2px 0 #758c97,
150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97;
animation: rain 1.5s linear infinite;
}
/*
.rain li::after {
content: "";
background: none;
position: absolute;
top: 300px;
left: -300px;
width: 5px;
height: 5px;
border-radius: 100% 5% 100% 100%;
transform: rotate(0deg);
z-index: 0;
box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97, 50px 20px 2px 0 #758c97,
100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97, 130px 70px 2px 0px #758c97,
-30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97, -70px 30px 2px 0 #758c97,
-130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97, -160px 80px 2px 0 #758c97,
-190px 130px 2px 0 #758c97, -150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97,
-100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97, -40px 100px 2px 0 #758c97,
-30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97, 40px 140px 2px 0 #758c97,
70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97, 100px 150px 2px 0 #758c97,
140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97, 170px 130px 2px 0 #758c97,
160px 140px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97,
180px 180px 2px 0 #758c97, 200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97,
250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97, -200px 180px 2px 0 #758c97,
-220px 185px 2px 0 #758c97, -150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97,
-80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97, -150px 350px 2px 0 #758c97,
-250px 250px 2px 0 #758c97, 150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97;
}
.rain li::before {
content: "";
background: none;
position: absolute;
top: -300px;
left: 300px;
width: 5px;
height: 5px;
border-radius: 100% 5% 100% 100%;
transform: rotate(0deg);
z-index: 0;
box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97, 50px 20px 2px 0 #758c97,
100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97, 130px 70px 2px 0px #758c97,
-30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97, -70px 30px 2px 0 #758c97,
-130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97, -160px 80px 2px 0 #758c97,
-190px 130px 2px 0 #758c97, -150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97,
-100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97, -40px 100px 2px 0 #758c97,
-30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97, 40px 140px 2px 0 #758c97,
70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97, 100px 150px 2px 0 #758c97,
140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97, 170px 130px 2px 0 #758c97,
160px 140px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97,
180px 180px 2px 0 #758c97, 200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97,
250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97, -200px 180px 2px 0 #758c97,
-220px 185px 2px 0 #758c97, -150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97,
-80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97, -150px 350px 2px 0 #758c97,
-250px 250px 2px 0 #758c97, 150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97;
}
*/
.rain li:nth-child(2) {
top: 150px;
left: -200px;
animation-delay: 0.55s;
}
.rain li:nth-child(3) {
top: 300px;
left: -350px;
animation-delay: 1.3s;
}
.rain li:nth-child(4) {
top: -350px;
left: 200px;
animation-delay: 0.25s;
}
@keyframes rain {
0% {
transform: translate(0, -300px) rotate(-45deg);
opacity: 0.5;
}
33%,
66% {
opacity: 1;
}
100% {
transform: translate(-50px, 300px) rotate(-45deg);
opacity: 0.5;
}
}
/* splash */
.splash-wrap {
position: relative;
bottom: 30px;
height: 50px;
z-index: 1;
width: 300px;
margin: 0 auto;
transform: rotate(5deg);
}
.splash {
position: absolute;
top: 0;
bottom: -20px;
left: -300px;
right: 0;
border-radius: 8px;
clip-path: polygon(
7% 100%,
5% 95%,
3% 80%,
11% 50%,
17% 38%,
23% 44%,
30% 53%,
37% 28%,
40% 29%,
45% 43%,
51% 53%,
59% 36%,
64% 22%,
67% 23%,
70% 34%,
72% 46%,
79% 37%,
83% 37%,
93% 61%,
96% 76%,
96% 94%,
94% 100%
);
background-color: white;
transform-origin: bottom;
animation: splash 5s ease-out 2.5s infinite backwards;
}
.splash-mini {
top: 0;
bottom: -30px;
left: -200px;
right: 0;
width: 300px;
animation-delay: 3.5s;
}
@keyframes splash {
0% {
transform: scale(0.3, 0);
}
49% {
transform: scale(0.3, 0);
}
50% {
transform: scale(0.3, 0.3);
}
60% {
transform: scale(0.5, 0.75);
}
90% {
transform: scale(1, 0);
}
100% {
transform: scale(1, 0);
}
}
.particles {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
.particles li {
position: absolute;
border-radius: 100%;
background-color: white;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-fill-mode: backwards;
}
.particles li::after {
content: "";
display: block;
width: 10px;
height: 10px;
left: 60px;
top: 20px;
position: absolute;
border-radius: 100%;
background: white;
}
.particles li::before {
content: "";
display: block;
width: 5px;
height: 5px;
left: 20px;
top: 60px;
position: absolute;
border-radius: 100%;
background: white;
}
.particles li:nth-child(1) {
width: 10px;
height: 10px;
left: 0px;
border-radius: 100% 100% 0 100%;
animation-name: jumpLeft;
animation-delay: 2.5s;
}
.particles li:nth-child(2) {
width: 20px;
height: 20px;
left: -100px;
border-radius: 100% 100% 0 100%;
animation-name: jumpLeft;
animation-delay: 3.5s;
}
.particles li:nth-child(2)::after {
width: 5px;
height: 5px;
left: 35px;
top: 20px;
border-radius: 100% 100% 0 100%;
}
.particles li:nth-child(2)::before {
width: 8px;
height: 8px;
left: 20px;
top: 40px;
border-radius: 100% 100% 0 100%;
}
.particles li:nth-child(3) {
width: 20px;
height: 20px;
border-radius: 100% 100% 100% 0;
animation-name: jumpRight;
animation-delay: 2.8s;
}
.particles li:nth-child(3)::after {
width: 10px;
height: 10px;
left: 60px;
top: 20px;
border-radius: 100% 100% 100% 0;
}
.particles li:nth-child(3)::before {
width: 8px;
height: 8px;
left: 100px;
top: 50px;
border-radius: 100% 100% 100% 0;
}
.particles li:nth-child(4) {
width: 10px;
height: 10px;
left: 60px;
border-radius: 100% 100% 100% 0;
animation-name: jumpRight;
animation-delay: 3s;
}
.particles li:nth-child(4)::after {
width: 10px;
height: 10px;
left: 10px;
top: -50px;
border-radius: 100% 100% 100% 0;
}
.particles li:nth-child(4)::before {
width: 8px;
height: 8px;
left: 100px;
top: 50px;
border-radius: 100% 100% 100% 0;
}
.particles li:nth-child(5) {
width: 10px;
height: 10px;
left: 60px;
border-radius: 100% 100% 100% 0;
animation-name: jumpRight;
animation-delay: 5.6s;
}
.particles li:nth-child(5)::after {
width: 10px;
height: 10px;
left: 10px;
top: -50px;
border-radius: 100% 100% 100% 0;
}
.particles li:nth-child(5)::before {
width: 8px;
height: 8px;
left: 80px;
top: 50px;
border-radius: 100% 100% 100% 0;
}
@keyframes jumpLeft {
0% {
transform: translate(0, 0) scale(0);
}
45% {
transform: translate(0, 0) scale(0);
}
60% {
transform: translate(-50px, -90px) scale(1);
}
100% {
transform: translate(-60px, 0px) scale(0.1);
}
}
@keyframes jumpRight {
0% {
transform: translate(0, 0) scale(0);
}
45% {
transform: translate(0, 0) scale(0);
}
60% {
transform: translate(30px, -80px) scale(1);
}
100% {
transform: translate(50px, 0px) scale(0.1);
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-56374215309880960162022-12-08T13:06:00.007-08:002022-12-24T05:00:32.434-08:00Winter Revisited
<div style="display:none">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRhBBdm4dxX9kb_HCtknaVx2V34t9F0c3a9EzYFlWI-TUMZG9l6ETgA9eH_u2aEZCoXeYifeQbSvBJEX5qUr_t_Kd9QVfMsMT_k-qxJIJcANzRRYQp2SJfNn0J0JdoGbC6WgQW8m0GerA-Lj0LwZNqiuuINIiRqja98zP4LP4uh2854ugviUxblPUSA/s1806/FlyBirdsBOX-SnowyWinter.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="1338" data-original-width="1806" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRhBBdm4dxX9kb_HCtknaVx2V34t9F0c3a9EzYFlWI-TUMZG9l6ETgA9eH_u2aEZCoXeYifeQbSvBJEX5qUr_t_Kd9QVfMsMT_k-qxJIJcANzRRYQp2SJfNn0J0JdoGbC6WgQW8m0GerA-Lj0LwZNqiuuINIiRqja98zP4LP4uh2854ugviUxblPUSA/s320/FlyBirdsBOX-SnowyWinter.png"/></a>
</div>
<span><a name='more'></a></span>
<!--
<div class="separator" style="clear: both;"><a href="https://codepen.io/FlyBirds-Box/pen/XWYGgGE" target="_blank"><img alt="" border="0" data-original-height="128" data-original-width="2223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpsyUNYJgLuIz6wkHM9tB5HNWR2RnQCiRLuFPr75wiNem2pp5rPGgKfn-MnfL_4UY4khHJrJmeMfK5S-c7Gq2Uih3wI4uf2jpYNrBvcgryw8zj-5QP2tyDZnO0nClGvjVOM73xfjuSUDBgHnNtahSFrXACgvhvxJg0x6qYc5P2TT8f_-VB1Qa6fnBcA/s1600/picked_by_CodePen.jpg"/></a></div>-->
<div class="static-border">
<br/>
<div id="winter-wrap">
<div class="sun"></div>
<div class="tree-wrap">
<ul class="tree top">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree middle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tree-wrap second-tree">
<ul class="tree top">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree middle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tree-wrap third-tree">
<ul class="tree top">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree middle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="ground"></div>
<div class="snow"></div>
<div class="snow2"></div>
</div>
</div>
<style>
#winter-wrap {
background-color: #6ab4e3;
background: linear-gradient(20deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(106,180,227,1) 76%, rgba(0,212,255,1) 100%);
max-width: 600px;
height: 600px;
/* border-top: 5px solid #ddd; */
border-bottom-color: #fff;
border-radius: 100% 100% 0 0;
margin: 25px auto;
padding: 0;
position: relative;
overflow: hidden;
box-shadow: inset 0 -50px 100px 50px #6ab4e3, inset 0 -100px 100px 75px #02024a, inset 0 50px 150px 10px #fff, 0 -15px 10px -10px #468cc5;
animation: skyflash 24s infinite alternate linear;
}
@keyframes skyflash {
0%, 100% {
box-shadow: inset 0 -50px 100px 50px #6ab4e3, inset 0 100px 100px 75px #02024a, inset 0 50px 150px 10px #fff, 0 -15px 10px -10px #468cc5;
}
33%, 66% {
box-shadow: inset 0 -50px 100px 50px #6ab4e3, inset 0 -100px 100px 75px #02024a, inset 0 50px 150px 10px #fff, 0 -15px 10px -10px #468cc5;
}
}
#winter-wrap::before {
content: "";
width: 550px;
height: 160px;
border-radius: 10px 100% 50px 0px;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
bottom: 0px;
left: 0;
box-shadow: inset -5px 10px 10px -5px #cbd7e6,
inset -15px 5px 25px 0px #b3c5da, inset -30px 30px 60px 10px #d7dce2,
inset -10px 25px 22px 10px #f5efe7;
}
#winter-wrap::after {
content: "";
width: 100%;
height: 100%;
border-radius: 100% 100% 0px 0px;
padding: 0;
margin: 0;
position: absolute;
bottom: 0px;
left: 0;
z-index:2;
overflow: hidden;
box-shadow:
inset 0px -50px 50px -10px #fff;
}
#winter-wrap ul {
padding: 0;
margin: 0;
}
.ground::after {
content: "";
width: 400px;
height: 130px;
border-radius: 100% 50% 0% 50%;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
z-index: 1;
bottom: -15px;
left: calc(50% - 210px);
box-shadow: inset -40px 0px 20px 15px #cbd7e6, -130px -5px 30px -10px #fff,
-150px -20px 0 -10px #b3c5da, 130px 35px 30px -30px #fff,
145px 20px 20px -20px #f5efe7, 150px 20px 0 -15px #b3c5da,
150px 20px 10px -16px #fff;
}
.ground::before {
content: "";
width: 300px;
height: 150px;
border-radius: 60% 100% 0% 0%;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
z-index: 2;
bottom: -66px;
right: 33px;
box-shadow: inset -50px 10px 40px 0px #cbd7e6;
}
.tree-wrap {
position: relative;
width: 100%;
height: 366px;
margin-top: 125px;
}
.tree-wrap::before {
content: "";
width: 150px;
height: 50px;
background: black;
box-shadow: 0 0 75px 50px black;
border-radius: 100% 100% 0 0;
position: absolute;
z-index: 1;
left: calc(50% - 110px);
bottom: 75px;
}
.tree-wrap::after {
content: "";
width: 50px;
height: 40px;
padding: 0;
margin: 0;
background: #611919;
position: absolute;
bottom: 0;
left: calc(50% - 25px);
box-shadow: inset -10px 10px 22px 2px black, inset 10px -10px 15px 0 #a56f20;
}
.tree {
margin: 0;
padding: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #174821;
position: absolute;
left: calc(50% - 100px);
list-style: none;
}
.top {
transform: rotateY(30deg);
transform-origin: center;
top: 35px;
z-index: 3;
}
.middle {
transform: rotateY(30deg) scale(1.4);
transform-origin: center;
top: 100px;
z-index: 2;
}
.bottom {
transform: rotateY(30deg) scale(2);
transform-origin: center;
top: 180px;
z-index: 1;
}
.tree li {
margin: 0;
padding: 0;
width: 0;
height: 0;
position: absolute;
top: 0px;
}
.tree li:first-child {
border-left: 100px solid transparent;
border-right: 0px solid transparent;
border-bottom: 100px solid #1f781d;
transform: rotateY(40deg) rotateZ(-5deg);
transform-origin: top right;
left: calc(50% - 100px);
}
.tree li:nth-child(2) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #1b612b;
transform: rotateY(-50deg) rotateZ(5deg);
transform-origin: bottom left;
}
.tree li:nth-child(3) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #559c5a;
transform: rotateY(253deg) rotateZ(7deg);
transform-origin: bottom left;
}
.tree li:nth-child(4) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #1f781d;
transform: rotateY(-75deg) rotateZ(9deg);
transform-origin: bottom left;
}
.tree-wrap.second-tree {
margin-top: -55%;
margin-left: -33%;
transform: scale(0.8);
z-index: 0;
}
.tree-wrap.third-tree {
margin-top: -50%;
margin-left: 25%;
transform: scale(0.5);
z-index: 0;
}
/**/
.snow {
background: white;
border-radius: 100%;
left: 50%;
position: absolute;
top: 0;
width: 5px;
height: 5px;
z-index: 99;
box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
.snow::after {
content: "";
background: white;
border-radius: 100%;
left: 100px;
position: absolute;
top: -200px;
width: 5px;
height: 5px;
z-index: 99;
box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}
.snow::before {
content: "";
background: white;
border-radius: 100%;
left: -200px;
position: absolute;
top: -300px;
width: 5px;
height: 5px;
z-index: 99;
box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}
@keyframes snow {
0% {
transform: translate(0, 0);
opacity: 0.15;
}
20% {
transform: translate(-20px, 100px);
opacity: 1;
}
70% {
transform: translate(-70px, 250px);
opacity: 0.7;
}
100% {
transform: translate(-100px, 300px);
opacity: 0.1;
}
}
@-moz-keyframes snow {
0% {
transform: translate(0, 0);
opacity: 0.15;
}
20% {
transform: translate(-20px, 100px);
opacity: 1;
}
70% {
transform: translate(-70px, 250px);
opacity: 0.7;
}
100% {
transform: translate(-100px, 300px);
opacity: 0.1;
}
}
@-webkit-keyframes snow {
0% {
transform: translate(0, 0);
opacity: 0.15;
}
20% {
transform: translate(-20px, 100px);
opacity: 1;
}
70% {
transform: translate(-70px, 250px);
opacity: 0.7;
}
100% {
transform: translate(-100px, 300px);
opacity: 0.1;
}
}
@-ms-keyframes snow {
0% {
transform: translate(0, 0);
opacity: 0.15;
}
20% {
transform: translate(-20px, 100px);
opacity: 1;
}
70% {
transform: translate(-70px, 250px);
opacity: 0.7;
}
100% {
transform: translate(-100px, 300px);
opacity: 0.1;
}
}
.snow2 {
content: "";
position: absolute;
top: -100px;
left: 50%;
border-radius: 50%;
width: 8px;
height: 8px;
background: #fff;
opacity: 0.8;
-webkit-animation: slowSnow 40s linear infinite;
-moz-animation: slowSnow 40s linear infinite;
-ms-animation: slowSnow 40s linear infinite;
animation: slowSnow 40s linear infinite;
box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
-100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
-150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
-190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
-270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
-200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
180px 380px 4px 1px #fff;
}
.snow2::before {
content: "";
position: absolute;
top: -500px;
left: 50%;
border-radius: 50%;
width: 8px;
height: 8px;
background: #fff;
opacity: 0.8;
-webkit-animation: slowSnow 30s linear infinite;
-moz-animation: slowSnow 30s linear infinite;
-ms-animation: slowSnow 30s linear infinite;
animation: slowSnow 30s linear infinite;
box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
-100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
-150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
-190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
-270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
-200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
180px 380px 4px 1px #fff;
}
/* slowSlow */
@keyframes slowSnow {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(-20px, 100px);
}
70% {
transform: translate(0px, 250px);
}
100% {
transform: translate(10px, 300px);
}
}
/* sun */
.sun {
width:100px;
height: 100px;
border-radius:100%;
background: #ff0;
background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
position: absolute;
bottom: -150px;
left: 0;
z-index:0;
transform-origin: 300px -150px;
animation: suntrack 24s infinite forwards linear, sunflash 24s infinite forwards linear;
}
@keyframes suntrack {
from { transform: rotate(.15turn); }
to { transform: rotate(.85turn); }
}
@keyframes sunflash {
0%, 66% {
box-shadow: inset 0 0 24px 75px #f90, 0 0 0 0 #f90;
}
25%, 33% {
box-shadow: inset 0px 0 0 0 #f90, 0 0 5px 2px #fc0;
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-88540689875303668972022-03-17T07:13:00.014-07:002022-12-06T12:41:56.790-08:00Ocean Pulps
<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-34EfzatI_vufmm_fudyxIWqCROP32304y3RrtE2vSRPOxlNjPeJFFzD9m8FnaLMPmmlvK2bgqIHVXDbaQfDasdalw2H2h0LFyK6vSUkWMhM-8-BZt6MeGbzl3x2n-MgpAM3wF3_cXiK_JOfXEXBypwrs5xpmye5vgMUGx2UnkusKseQ8GCPSp2mn/s1600/pulps.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="617" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-34EfzatI_vufmm_fudyxIWqCROP32304y3RrtE2vSRPOxlNjPeJFFzD9m8FnaLMPmmlvK2bgqIHVXDbaQfDasdalw2H2h0LFyK6vSUkWMhM-8-BZt6MeGbzl3x2n-MgpAM3wF3_cXiK_JOfXEXBypwrs5xpmye5vgMUGx2UnkusKseQ8GCPSp2mn/s1600/pulps.jpg"/></a></div>
<span><a name='more'></a></span>
<div id="pulps-wrap" class="static-border">
<div class="pulp-one"></div>
<div class="bg-pulp active"></div>
</div>
<style>
#pulps-wrap {
margin:0;
padding:0;
display: flex;
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
flex-flow: row wrap;
max-width: 100%;
margin: auto;
position:relative;
z-index:0;
overflow:hidden;
background: rgb(227,231,231);
background: -moz-linear-gradient(0deg, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: -webkit-linear-gradient(0deg, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: linear-gradient(0deg, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e7e7",endColorstr="#e3e7e7",GradientType=1);
}
.pulp-one {
width:700px;
height:600px;
position:relative;
border-radius:100%;
box-shadow: 0 0 75px 30px #c0cecf, 0 0 100px 10px #c4d2d3;
animation: cloud1 4.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
background: rgb(227,231,231);
background: -moz-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: -webkit-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e7e7",endColorstr="#e3e7e7",GradientType=1);
}
.pulp-one::before {
content:'';
display:block;
position:absolute;
z-index:0;
left:25%;
top:20%;
width:700px;
height:600px;
border-radius:100%;
box-shadow: 0 0 75px 30px #c0cecf, 0 0 100px 10px #c4d2d3;
animation: cloud2 2.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
background: rgb(227,231,231);
background: -moz-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: -webkit-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e7e7",endColorstr="#e3e7e7",GradientType=1);
}
@keyframes cloud2 {
0%{
transform:rotate(-25deg) scale(1.0);
border-top-right-radius:30%;
border-bottom-right-radius:70%;
border-bottom-left-radius:100%;
border-top-left-radius:50%;
}
50%{
transform:rotate(50deg) scale(0.9);
border-top-right-radius:70%;
border-bottom-right-radius:100%;
border-bottom-left-radius:50%;
border-top-left-radius:60%;
}
100%{
transform:rotate(0deg) scale(1.1);
border-top-right-radius:100%;
border-bottom-right-radius:50%;
border-bottom-left-radius:30%;
border-top-left-radius:70%;
}
}
.pulp-one::after {
content:'';
display:block;
position:absolute;
z-index:0;
width:110px;
height:110px;
left:25%;
top:20%;
box-shadow: 0 0 27px 33px #c0cecf, 0 0 100px 10px #c4d2d3;
border-radius:110px;
animation: cloud1 1.6s cubic-bezier(0, 0.55, 1, 0.24) infinite alternate;
background: rgb(227,231,231);
background: -moz-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: -webkit-radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
background: radial-gradient(circle, rgba(227,231,231,1) 10%, rgba(209,221,221,1) 25%, rgba(186,201,202,1) 51%, rgba(193,207,208,1) 65%, rgba(209,221,221,1) 79%, rgba(227,231,231,1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e7e7",endColorstr="#e3e7e7",GradientType=1);
}
@keyframes cloud1 {
0%{
transform:rotate(0deg) scale(1.4);
border-top-left-radius:20px;
}
20%{
transform:rotate(50deg) scale(1.2);
border-top-right-radius:20px;
border-bottom-left-radius:10px;
}
100%{
transform:rotate(0deg);
border-bottom-right-radius:20px;
border-top-left-radius:10px;
}
}
#pulps-wrap .bg-pulp::before, #pulps-wrap .bg-pulp::after {
top: 33%;
right: 0%;
width:750px;
height:750px;
border:none;
box-shadow: 0 0 70px 0px #c0cecf, 0 0 10px 0px #c4d2d3;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+20,ffffff+45,ffffff+100&0.33+21,0.23+39,0.14+56,0.34+80,1+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 20%, rgba(255,255,255,0.33) 21%, rgba(255,255,255,0.23) 39%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0.14) 56%, rgba(255,255,255,0.34) 80%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 20%,rgba(255,255,255,0.33) 21%,rgba(255,255,255,0.23) 39%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.14) 56%,rgba(255,255,255,0.34) 80%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.33) 20%,rgba(255,255,255,0.33) 21%,rgba(255,255,255,0.23) 39%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.14) 56%,rgba(255,255,255,0.34) 80%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* BG PULP
*********************/
.bg-pulp::before,
.bg-pulp::after {
content: '';
display: block;
height: 500px;
width: 500px;
margin: 0 auto;
background: rgba(243, 242, 243,.25);
position: absolute;
border-radius: 100%;
z-index: -2;
top: -66%;
left: calc(50% - 250px);
border:1px solid white;
}
.bg-pulp::before {
background: rgba(243, 242, 243,.5);
transform:rotate(-25deg);
border-top-right-radius:90%;
border-bottom-right-radius:70%;
border-bottom-left-radius:100%;
border-top-left-radius:50%;
}
.bg-pulp::after {
transform:rotate(-15deg);
border-top-right-radius:90%;
border-bottom-right-radius:70%;
border-bottom-left-radius:100%;
border-top-left-radius:50%;
}
.active.bg-pulp::before {
animation: bg-pulp 4.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
.active.bg-pulp::after {
animation: bg-pulp 3.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
@keyframes bg-pulp {
0%{
transform:rotate(-25deg) scale(1.0);
border-top-right-radius:90%;
border-bottom-right-radius:70%;
border-bottom-left-radius:100%;
border-top-left-radius:50%;
}
50%{
transform:rotate(50deg) scale(0.9);
border-top-right-radius:70%;
border-bottom-right-radius:100%;
border-bottom-left-radius:50%;
border-top-left-radius:70%;
}
100%{
transform:rotate(0deg) scale(1.1);
border-top-right-radius:100%;
border-bottom-right-radius:50%;
border-bottom-left-radius:80%;
border-top-left-radius:70%;
}
}
@media only screen and (min-width: 768px) {
.columns .bg-pulp::before,
.columns .bg-pulp::after {
top: -50%;
left: calc(50% - 150px);
}
.columns.rev .bg-pulp::before,
.columns.rev .bg-pulp::after {
top: -50%;
left: calc(50% - 350px);
}
}
</style>
<!--
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
var sTop= jQuery(this).scrollTop();
if(sTop > 10){
jQuery('.bg-pulp').addClass('active');
} else {
jQuery('.bg-pulp').removeClass('active');
}
});
})
</script>
-->FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-53817087080477312142021-09-08T07:09:00.006-07:002022-12-06T06:12:08.706-08:00Ink Splash
<div class="separator" style="display:none;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1m65bFqBR6hxDg0nOCgEsixYzw0B32ypFBzH-5ifKirpiyEN0S0yZsC4Fv2lb3tBP-kArOqYalcHIOsViot4hvfajEpo3NgV-Ce357Aadnc-O6qUQl7Zr-T4IMzhWVZtKDTUasM_eucL6YVGIZuAnwzK3s4rbPG9sRp-d9ziJ_-Z1JgmRCai4uhV2/s1600/FlyBirdsBOX-Ink3.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="849" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1m65bFqBR6hxDg0nOCgEsixYzw0B32ypFBzH-5ifKirpiyEN0S0yZsC4Fv2lb3tBP-kArOqYalcHIOsViot4hvfajEpo3NgV-Ce357Aadnc-O6qUQl7Zr-T4IMzhWVZtKDTUasM_eucL6YVGIZuAnwzK3s4rbPG9sRp-d9ziJ_-Z1JgmRCai4uhV2/s1600/FlyBirdsBOX-Ink3.jpg"/></a></div>
<span><a name='more'></a></span>
<div class="static-border">
<div id="ink-bg-wrap">
<div id="ink-wrap">
<div id="inktouch"></div>
<div class="bg"></div>
<div class="drops"></div>
</div>
</div>
</div>
<style>
#ink-bg-wrap {
filter: contrast(9);
}
#ink-wrap {
position:relative;
width: 100%;
height: 643px;
background: #ebfafc;
overflow: hidden;
--mask: linear-gradient(red, rgba(0, 0, 0, 0.5));
}
#ink-wrap::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -230px;
background: radial-gradient(#000, transparent) 0 0/1em 1em space;
-webkit-mask: var(--mask);
mask: var(--mask);
transform: rotate(-90deg);
}
#inktouch {
animation: inktouch-cycle 1.3s steps(6) infinite alternate;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7cLDehKfzEvrYxK6R9sL0E_TjvnelGVmyikmp7z69mDJyCPkeVxoD6cEBfQO0PE752qC2-EQUoMcO9mBReKpqB_zQCm8UjKV-n_UOfdP2YsUh28ZAm55Qr9VWDMEMhFZAwEaDE_Q95E/s0/inktouch.jpg) 0px 0px no-repeat;
width: 780px;
height: 643px;
position: absolute;
top: calc(50% - 321px);
left: calc(50% - 390px);
transform: translateZ(0) scale(1.05);
outline:30px solid black;
outline-offset:-65px;
filter: contrast(2);
}
@media only screen and (max-width: 576px) {
#inktouch {left: calc(50% - 330px);}
}
@keyframes inktouch-cycle {
0% {background-position: 0 0; }
100% {background-position: 0 -3862px; }
}
.bg {
display:block;
width: 500px;
height: 400px;
margin: 0 auto;
position:relative;
left:calc(0% - 500px);
top:calc(50% - 200px);
filter: blur(5px);
}
.bg::before {
content:'';
display:block;
background: black;
width: 500px;
height: 500px;
position:absolute;
left: 50px;
top:calc(50% - 150px);
transform: rotate(-140deg);
z-index:1;
box-shadow: 200px -30px 0 95px, 105px -10px 0 55px, 50px -80px 0 75px, 50px -250px 0 95px;
animation:night 1.3s alternate ease-in-out infinite;
filter: blur(5px);
}
@keyframes night {
0%{
border-radius: 200px 500px 200px 10%;
}
100%{
border-radius: 150px 300px 150px 40%;
}
}
.drops {
background: black;
width: 15px;
height: 15px;
position:absolute;
left: calc(50% - 50px);
top:calc(50% - 150px);
transform: rotate(45deg);
z-index:1;
border-radius: 100% 10px 100% 5%;
box-shadow: 50px 0 0 0, -50px 80px 0 0, -50px 40px 0 0, -120px 40px 0 0, 150px 0px 0 0, -130px -30px 0 0, 230px 200px 0 0, 200px 270px 0 0, 150px 390px 0 0, 150px 200px 0 0;
animation:drops-cycle 3.9s ease-in infinite;
filter: blur(2px);
}
@keyframes drops-cycle {
0%{
opacity:0;
transform:translatex(0px) rotate(45deg) scale(.9)
}
45%, 75% {opacity:1;}
100%{
opacity:0;
transform:translatex(150px) rotate(45deg) scale(1);
border-radius: 50% 100% ;
}
}
.drops::after {
content:'';
display:block;
background: black;
width: 13px;
height: 13px;
position:absolute;
left: 50px;
top: 300px;
z-index:1;
border-radius: 100% 10px 100% 5%;
box-shadow: 50px 0 0 0, -50px 80px 0 0, -50px 40px 0 0, -120px 40px 0 0, 150px 0px 0 0, -130px -30px 0 0, 230px 200px 0 0, 200px 270px 0 0, 150px 390px 0 0, 150px 200px 0 0;
animation:drops-cycle2 3.9s ease-in infinite 3s;
}
.drops::before {
content:'';
display:block;
background: black;
width: 13px;
height: 13px;
position:absolute;
left: -150px;
top: 100px;
z-index:1;
border-radius: 100% 10px 100% 5%;
box-shadow: 50px 0 0 0, -50px 80px 0 0, -50px 40px 0 0, -120px 40px 0 0, 150px 0px 0 0, -130px -30px 0 0, 230px 200px 0 0, 200px 270px 0 0, 150px 390px 0 0, 150px 200px 0 0;
animation:drops-cycle2 3.9s ease-in infinite 2s;
filter: blur(2px);
}
@keyframes drops-cycle2 {
0%{
opacity:0;
transform:translatex(0px) rotate(0deg) scale(.9)
}
25%, 75% {opacity:1;}
100%{
opacity:0;
transform: rotate(0deg) scale(1);
border-radius: 50% 100% ;
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-81082300305350548612021-08-29T07:06:00.002-07:002022-12-06T06:07:50.229-08:00Panther Walk<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML4TQMC5b_ZXHFTV1N9wi0UGJhjBTO42xeQIqorYgM9IdQwXD6V32HTFN9K8mQSa-qYCa4GOXAhkn0uyNdlKbJMrVgKHjGG58phuMi6sM3m_omc6MWfQ-6J56H4v-aBv_MXlzqLQQ0XT83ycRXMAYqWYynh0aDvbQs_msnRcCu8g0wdfjtSmlzS6J/s1600/FlyBirdsBOX-Panther.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1398" data-original-width="1516" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML4TQMC5b_ZXHFTV1N9wi0UGJhjBTO42xeQIqorYgM9IdQwXD6V32HTFN9K8mQSa-qYCa4GOXAhkn0uyNdlKbJMrVgKHjGG58phuMi6sM3m_omc6MWfQ-6J56H4v-aBv_MXlzqLQQ0XT83ycRXMAYqWYynh0aDvbQs_msnRcCu8g0wdfjtSmlzS6J/s1600/FlyBirdsBOX-Panther.jpg"/></a></div>
<span><a name='more'></a></span>
<div id="Panther" class="static-border">
<div id="animation"></div>
<div id="mountains"></div>
<div class="bg">
<div class="star-wrap">
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
<i class="star"></i>
</div>
</div>
</div>
<style>
#Panther {
width: 100%;
height: calc(100vh - 20px);
position:relative;
left:0;
top:0;
border:10px solid black;
box-sizing: border-box;
background: white;
overflow:hidden;
}
#animation {
animation: walk-cycle 1.5s steps(16) infinite;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp69-Dm4mi3x8qCE_PUgcIO-z0cfz_RnRReJdmDir2_WCBNb81HTB39vKwiPd_narzx581ZV70MkZXBFhiPFmkvq3ync_IURiHji3OcGlrEyhh8Hmljbj_EOqa7XpjeY9DQwua825j9IY/s0/panther.png) 0px 0px no-repeat;
width: 204px;
height: 107px;
position: absolute;
z-index: 999;
bottom: calc(50vh - 55px);
left: 50%;
transform: scale(1);
}
@keyframes walk-cycle {
0% {background-position: 0 0;}
100% {background-position: 0 -1712px;}
}
#mountains {
width: auto;
height: 100%;
top:-200px;
position:relative;
z-index:0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoY6oKxM2cN7ViWQXFMb-TA4svvpkAMlR5RKj204BPdT4vaQeVDiiEKmjlGEeLHCSSOTgmdYcyGgabEzweXa51D-_7HKx0FX6DVEOuWUJaFs9lbyXLdeaPCtcX_Nz1SiCssEwyqXsVpuA/s0/passing-mountains.jpg);
background-repeat: repeat-x;
background-size:250%;
background-position:center;
animation: mountains 100s linear infinite;
}
@keyframes mountains {
from { background-position: 3000px 70%; }
to { background-position: 0 70%; }
}
.bg {
display:block;
width: 200px;
height: 400px;
position:absolute;
top: calc(50% - 200px);
left: calc(50% - 200px)
}
.bg::before {
content:'';
display:block;
background: transparent;
width: 450px;
height: 450px;
position:absolute;
left: 0px;
bottom: calc(50% - 225px);
transform: rotate(45deg);
z-index:1;
border-radius: 300px 15px 300px 10%;
box-shadow: -25px 25px 0px 10px #1a1a1a, -50px 50px 0 50px #000, -100px 100px 0 100px #000621, -150px 150px 0 150px #000,
50px -50px 0px 10px #efefef;
animation:night 5s alternate ease-in-out infinite;
}
@keyframes night {
0%{
border-radius: 300px 15px 300px 10%;
}
100%{
border-radius: 200px 15px 200px 50%;
}
}
/* star */
.star-wrap {
position:relative;
z-index:11;
width:200px;
height: 600px;
left: calc(50% - 200px);
top: calc(50% - 300px);
}
.star {
animation:stars 10s ease-in-out infinite;
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #Fff;
border-left: 0.3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
z-index:10;
transform: scale(.3);
box-shadow: -200px 100px 0 0 white
}
.star:before, .star:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0.6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #Fff;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}
@keyframes stars {
0%, 100% {
opacity:0.05;
}
50%{
opacity:.4;
transform: scale(.4) rotate(25deg)
}
}
.star:nth-child(2) {
top:25px
}
.star:nth-child(3) {
top:5px;
left: 10px;
animation-delay: .2s;
}
.star:nth-child(4) {
top:15px;
left: 10px;
animation-delay: .3s;
}
.star:nth-child(5) {
top:25px;
left: -20px
}
.star:nth-child(6) {
top:-10px;
left: -20px;
animation-delay: .5s;
}
.star:nth-child(7) {
top:10px;
left: -20px;
animation-delay: .4s;
}
.star:nth-child(8) {
top:50px;
left: -70px
}
.star:nth-child(9) {
top:300px;
left: -155px;
animation-delay: .2s;
}
.star:nth-child(10) {
top:300px;
left: -5px;
animation-delay: .4s;
}
.star:nth-child(11) {
top:350px;
left: -75px;
animation-delay: .3s;
}
.star:nth-child(12) {
top:370px;
left: -80px;
}
.star:nth-child(13) {
top:350px;
left: 70px;
animation-delay: .5s;
}
.star:nth-child(14) {
top:360px;
left: -50px;
animation-delay: .2s;
}
.star:nth-child(15) {
top:385px;
left: 10px;
animation-delay: .4s;
}
.star:nth-child(16) {
top:345px;
left: 90px;
animation-delay: .5s;
}
/* end of star */
@media only screen and (max-width: 576px) {
#animation {left: 25%;}
#Panther {overflow: hidden;}
}
/*
@media only screen and (max-width: 768px) {
#Panther {transform: scale(.5)}
}
@media only screen and (max-width: 576px) {
#Panther {transform: scale(.3)}
}
*/
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-46327492355008520612021-03-04T06:02:00.003-08:002022-12-06T06:03:53.673-08:00CSS Art Kimmidoll<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3DBD8Pm3HFlKpqs63Ou1HogFqfwMYi3v-29Gn1Qpc9E5vPBcGr-u_TNtJhve5tDcWrfVmBFxqVcbQfLtsM9ka7X6ZlPw9DhaPlnJHVFgNXzzt5DActTF44zr0L-c9G30m_5-pT73hHJ_bORnPR19WvYyfzviMzmcnXlyCT_rvWvWB76gZz4VMfrJ/s1600/FlyBirdsBOX-Kimmidoll.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1440" data-original-width="1380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3DBD8Pm3HFlKpqs63Ou1HogFqfwMYi3v-29Gn1Qpc9E5vPBcGr-u_TNtJhve5tDcWrfVmBFxqVcbQfLtsM9ka7X6ZlPw9DhaPlnJHVFgNXzzt5DActTF44zr0L-c9G30m_5-pT73hHJ_bORnPR19WvYyfzviMzmcnXlyCT_rvWvWB76gZz4VMfrJ/s1600/FlyBirdsBOX-Kimmidoll.png"/></a></div>
<span><a name='more'></a></span>
<div id="Mizuki-bg" class="static-border" style="background: none;">
<div id="Mizuki">
<div class="hair">
<div class="flower"></div>
</div>
<div class="head">
<div class="lips"></div>
</div>
<div class="body">
<div class="neck"></div>
<div class="belt"></div>
<div class="arms">
<div class="left">
<div class="flower"></div>
</div>
<div class="right">
<div class="flower"></div>
</div>
</div>
<div class="flowers">
<div class="flower2"></div>
<div class="flower3"></div>
<div class="sides">
<div class="lefts">
<div class="flower"></div>
<div class="flower3"></div>
<div class="flower1"></div>
<div class="flower1rev"></div>
</div>
<div class="rights">
<div class="flower3"></div>
<div class="flower1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#Mizuki {
width: 400px;
max-width: 100%;
height: 600px;
margin: 10% auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#Mizuki-bg {
position: relative;
overflow:hidden;
}
#Mizuki-bg::before {
content:'';
display:block;
height: 500px;
width: 500px;
margin:0 auto;
background:rgb(255 255 255 / 66%);
position:absolute;
border-radius:100%;
z-index:0;
top: 110px;
left: calc(50% - 250px);
border:1px solid #ececec;
}
/* HAIR */
#Mizuki .hair {
width: 335px;
height: 340px;
background: #2c282a;
position: absolute;
bottom: 260px;
border-radius: 50%;
border-bottom-left-radius: 6%;
border-bottom-right-radius: 6%;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
box-shadow: inset 2px 8px 15px 0px #aea7ae, inset 8px 5px 15px 15px #433e40;
}
#Mizuki .hair::after {
content: '';
position: absolute;
width: 290px;
height: 150px;
background: black;
bottom: 0;
border-radius: 5px 5px 3% 3%;
box-shadow: 0px -110px 25px -40px black, 0px -100px 35px -20px black,
0 -5px 5px black, 0 -5px 10px black,
0 -180px 50px -70px #a0a0a0;
}
#Mizuki .hair .flower {
width: 20px;
height: 20px;
background: #bd9261;
border: 1px solid #e6b28c;
border-radius: 50%;
position: absolute;
right: calc(50% - 140px);
top:130px;
z-index: 1;
box-shadow: 0 0 3px 3px #7f2738, 0 0 0 9px #951e2d,
12px 0px 0 0 #951e2d, 12px 0px 0 2px #64484a,
5px 15px 0 0 #951e2d, 5px 15px 0 2px #64484a,
-13px 10px 0 0 #951e2d, -13px 10px 0 2px #64484a,
-15px -8px 0 0 #951e2d, -15px -8px 0 2px #64484a,
3px -14px 0 0 #951e2d, 3px -14px 0 2px #64484a;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-50deg) rotateZ(0deg)
}
/* HEAD */
#Mizuki .head {
width: 240px;
height: 130px;
background: #dab59a;
position: absolute;
bottom: 280px;
border-radius: 100px;
border-top-left-radius: 2%;
border-top-right-radius: 2%;
z-index: 2;
box-shadow: inset 0px 0px 1px 0px #2a1e1d, inset 15px 10px 15px -10px #654d44, inset -15px 10px 15px -10px #654d44, inset 18px 0px 25px -15px #957560, inset -18px 0px 25px -15px #957560, inset 0px 30px 25px 0px #957560, 0px 1px 15px -5px #280203, 0 20px 20px -15px #421f06;
}
#Mizuki .head::before {
content: '';
width: 50px;
height: 14px;
background: black;
border-bottom: 1px solid white;
position: absolute;
border-radius: 0 100%;
top: 25px;
left: calc(50% - 100px);
box-shadow: 40px 60px 20px 20px #e9c9af;
animation: blink 8s ease-in infinite;
-webkit-animation: blink 8s ease-in infinite;
}
#Mizuki .head::after {
content: '';
width: 50px;
height: 14px;
background: black;
border-bottom: 1px solid white;
position: absolute;
border-radius: 100% 0!important;
top: 25px;
left: calc(50% + 50px);
box-shadow: -40px 60px 20px 20px #e9c9af;
animation: blink 8s ease-in infinite;
-webkit-animation: blink 8s ease-in infinite;
}
@-webkit-keyframes blink {
0%, 45%, 55%, 100% {-webkit-transform: translate(0px, 0px) scale3d(1, 1, 1); }
50% {height: 5px; -webkit-transform: translate(0px, 3px) scale3d(1, .5, 1); box-shadow: none}
}
@keyframes blink {
0%, 45%, 55%, 100% {transform: translate(0px, 0px) scale3d(1, 1, 1); }
50% {transform: translate(0px, 3px) scale3d(1, .5, 1); box-shadow: none}
}
#Mizuki .head .lips {
width: 18px;
height: 6px;
background: #aa122e;
position: absolute;
z-index: 3;
left: calc(50% - 9px);
top:80px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 0 0 0 0 #b11c32, 0 1px 0px 0px #731012, 0 3px 3px -2px #fff, 0 -5px 4px -2px #fff, 0 -25px 50px 20px #efbc98;
}
#Mizuki .head .lips::before {
content: '';
width: 0;
height: 0;
background: none;
position: absolute;
bottom:6px;
left:0;
border-left:6px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom:4px solid #aa122e;
box-shadow: -90px 60px 40px 15px #370c01;
}
#Mizuki .head .lips::after {
content: '';
width: 0;
height: 0;
background: none;
position: absolute;
bottom:6px;
right:0;
border-left:6px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom:4px solid #aa122e;
box-shadow: 90px 60px 40px 15px #370c01;
}
/* BODY */
#Mizuki .body {
width: 240px;
height: 270px;
background: #966121;
position: absolute;
bottom: 25px;
border-top-left-radius: 30%;
border-top-right-radius: 30%;
z-index: 1;
box-shadow: inset 0 -7px 10px 1px #c19e86, inset 0 -20px 20px 2px #c19e86, inset 0 10px 30px 10px #613109, inset 20px 30px 20px 50px #9f691e, inset -20px 30px 20px 50px #9f691e;
}
/*
#Mizuki .body::after {
content: "";
position: absolute;
top:290px;
left: calc(50% - 100px);
z-index: -999;
width: 200px;
height: 2px;
border-radius: 50%;
background: none;
box-shadow: 0 -30px 50px 70px #996925, 0 -30px 50px 50px #999,;
}
*/
#Mizuki .body::before {
content: "";
position: absolute;
width: 240px;
height: 70px;
background: -moz-linear-gradient(top, rgba(150,97,33,0) 0%, rgba(150,97,33,1) 40%, rgba(150,97,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(150,97,33,0) 0%,rgba(150,97,33,1) 40%,rgba(150,97,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(150,97,33,0) 0%,rgba(150,97,33,1) 40%,rgba(150,97,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00966121', endColorstr='#966121',GradientType=0 ); /* IE6-9 */
bottom: -26px;
border-radius: 0 0 40% 40%;
z-index: -99;
box-shadow: 0 3px 1px -1px #321006, inset 0 -2px 5px -2px #c19e86;
}
#Mizuki .body .neck {
width: 1px;
height: 1px;
position: relative;
margin: 0 auto;
background: none;
border-radius: 50%;
z-index: 11;
box-shadow: 0 50px 50px 40px #613109, 0 25px 60px 40px #613109, 0 30px 70px 50px #ab4f00
, -80px -5px 15px 15px #000, -90px 5px 25px 15px #000, 80px -5px 15px 15px #000, 90px 5px 25px 15px #000;
}
#Mizuki .body .neck::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 25px 80px 10px 0;
border-color: transparent #73091c transparent transparent;
transform: rotate(40deg);
position: absolute;
top:10px;
left: calc(50% - 60px);
}
#Mizuki .body .neck::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0px 40px 25px 0;
border-color: transparent #73091c transparent transparent;
transform: rotate(113deg);
position: absolute;
top:1px;
left: calc(50% - 1px);
}
#Mizuki .body .belt {
position: relative;
margin-left: calc(50% - 50px);
margin-top: 100px;
border-top: 25px solid #3a3636;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
#Mizuki .body .belt::before {
content: '';
position: absolute;
bottom:25px;
left:-35px;
border-top: 10px solid #730818;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0px;
width: 100px;
}
#Mizuki .body .belt::after {
content: '';
position: absolute;
bottom:-20px;
left:-0;
border-top: 20px solid #730818;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 0px;
height: 0px;
}
/* arms */
#Mizuki .body .arms {
position: relative;
width: 0;
height: 0;
margin: auto;
}
#Mizuki .body .arms .left {
position: absolute;
width: 100px;
height: 60px;
bottom: 5px;
left: -90px;
border-bottom: 7px solid #3e363a;
border-radius: 0 0 0 100%;
transform: rotate(30deg);
box-shadow: inset 5px -10px 10px -10px #280203;
}
#Mizuki .body .arms .left::after {
content: '';
position: absolute;
width: 65px;
height: 50px;
bottom: -60px;
left:40px;
border-bottom: 5px solid #3e363a;
border-radius: 0 0 0 30px;
transform: rotate(-90deg);
}
#Mizuki .body .arms .left::before {
content: '';
width:13px;
height: 16px;
background: #c59a81;
border-radius: 0px 50% 20px 0;
position: absolute;
right: -13px;
bottom: -15px;
z-index: 999;
box-shadow: 1px 2px 5px -1px #613109;
box-sizing: border-box;
/* box-shadow: 0 45px 0px 40px #613109, 0 20px 0px 30px #550402;*/
}
#Mizuki .body .arms .left .flower {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
bottom:-25px;
right: 26px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-5px 0 0 5px #81152b, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #623436;
transform: scale(1.5) rotateX(0deg) rotateY(30deg) rotateZ(0deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .arms .left .flower::after {
content: '';
width: 20px;
height: 20px;
background: #ad7c49;
border: 1px solid #e6b28c;
border-radius: 50%;
position: absolute;
right: -18px;
bottom: -26px;
z-index: 1;
box-shadow: 0 0 2px 2px #7f2738,
19px 0px 0 0 #951e2d, 22px 1px 0 0 #865940, 24px 2px 0 0px #623436,
5px 15px 0 0 #951e2d, 8px 17px 0 0 #865940, 8px 19px 0 0 #623436,
-13px 10px 0 0 #951e2d, -13px 14px 0 0 #865940, -15px 15px 0 0 #623436,
-15px -8px 0 0 #951e2d, -17px -9px 0 0 #623436,
3px -14px 0 0 #951e2d, 4px -16px 0 0 #623436;
transform: scale(.15)
}
#Mizuki .body .arms .right {
position: absolute;
width: 100px;
height: 60px;
bottom: 5px;
right: -90px;
border-bottom: 7px solid #3e363a;
border-radius: 0 0 100% 0;
transform: rotate(-30deg);
box-shadow: inset -5px -10px 10px -10px #280203;
}
#Mizuki .body .arms .right::after {
content: '';
position: absolute;
width: 65px;
height: 50px;
bottom: -60px;
right: 40px;
border-bottom: 5px solid #3e363a;
border-radius: 0 0 30px 0;
transform: rotate(90deg);
}
#Mizuki .body .arms .right::before {
content: '';
width:13px;
height: 16px;
background: #c59a81;
border-radius: 50% 0 0 20px;
position: absolute;
left: -13px;
bottom: -15px;
box-shadow: 1px 2px 5px -1px #613109;
box-sizing: border-box;
}
#Mizuki .body .arms .right .flower {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
bottom:-25px;
left: 26px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-4px 0 0 5px #81152b, -5px 0 0 5px #865940, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 4px 0 5px #865940, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 2px 5px 0 5px #865940, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -4px 0 5px #865940, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 8px 3px 0 3px #865940, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #865940, 0px 10px 0 3px #623436;
transform: scale(1.5) rotateX(0deg) rotateY(40deg) rotateZ(90deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .arms .right .flower::after {
content: '';
position: absolute;
width: 3px;
height: 16px;
background: none;
top: 0px;
left: 10px;
border: 3px solid #3e363a;
border-left:none;
border-radius: 0 10px 15px 0;
}
#Mizuki .body .flowers {
position: relative;
/*
background: red;
width: 100%;
height: 170px;
overflow-x: hidden;
*/
}
/* 2 */
#Mizuki .body .flowers .flower2 {
width: 20px;
height: 20px;
margin: auto;
border-radius: 50%;
background: #7f2738;
border: 2px solid #623436;
position: absolute;
z-index: 2;
box-sizing: content-box;
top: 95px;
left: calc(50% - 50px);
box-shadow: -10px -10px 0 -11px #c28e6e, -13px -15px 0 -11px #c28e6e, -10px -20px 0 -11px #c28e6e, -5px -30px 0 -11px #c28e6e, 0px -30px 0 -11px #c28e6e, 5px -35px 0 -11px #c28e6e, 10px -33px 0 -11px #c28e6e, 19px -28px 0 -11px #c28e6e, 23px -27px 0 -11px #c28e6e, 25px -23px 0 -11px #c28e6e,
21px -9px 0px -2px #7f2738, 21px -8px 0px -2px #865940, 21px -9px 0px 0px #623436,
14px 5px 0 -7px #7f2738, 14px 5px 0 -5px #623436,
8px -12px 2px -9px #7f2738, 8px -12px 0 -6px #3a2418,
0px -15px 0 -11px #3a2418, 5px -20px 0 -11px #3a2418, 11px -20px 0 -11px #3a2418,
9px -13px 0px 4px #c28e6e,
-14px -14px 0 1px #7f2738, -14px -14px 0 3px #623436,
0px -33px 0 2px #7f2738, 0px -33px 0 4px #623436,
22px -25px 0 1px #7f2738, 22px -25px 0 3px #623436,
15px 15px 0 -8px #7f2738, 15px 16px 0 -8px #865940, 15px 16px 0 -7px #623436,
-12px 2px 0 -6px #7f2738, -12px 3px 0 -6px #865940, -12px 3px 0 -5px #623436,
-5px 12px 0 -6px #7f2738, -5px 13px 0 -6px #865940, -5px 13px 0 -5px #623436,
33px -12px 0 -5px #7f2738, 34px -12px 0 -4px #623436,
16px -40px 0 -4px #7f2738, 16px -40px 0 -3px #623436,
28px -43px 0 -6px #7f2738, 26px -43px 0 -6px #865940, 28px -44px 0 -5px #623436,
-17px -31px 0 -4px #7f2738, -17px -31px 0 -3px #623436;
}
#Mizuki .body .flowers .flower2::before {
content: '';
position: absolute;
z-index: -1;
width: 10px;
height: 25px;
background: none;
top: 13px;
left: 33px;
border:none;
border-left: 4px solid #3e3d3c;
border-radius: 10px 0 0 3px;
transform: rotate(-60deg)
}
#Mizuki .body .flowers .flower2::after {
content: '';
width: 20px;
height: 20px;
background: #ad6f41;
border: 1px solid #e6b28c;
border-radius: 50%;
position: absolute;
left: 0px;
bottom: -35px;
z-index: 1;
box-shadow: inset 0 0 2px 5px #865940,
12px 0px 0 0 #7d1b2b, 16px 0 0 0 #865940, 18px 0px 0 0px #623436,
5px 15px 0 0 #7d1b2b, 7px 17px 0 0 #865940, 8px 19px 0 0 #623436,
-13px 10px 0 0 #7d1b2b, -14px 12px 0 0 #623436,
-15px -8px 0 0 #7d1b2b, -17px -10px 0 0 #865940, -19px -13px 0 0 #623436,
3px -14px 0 0 #7d1b2b, 5px -16px 0 0 #865940, 7px -18px 0 0 #623436,
-45px -25px 0 -4px #4b3e3e, -65px -15px 0 -4px #4b3e3e, -70px 8px 0 -1px #4b3e3e, -45px 5px 0 -2px #4b3e3e, -33px 30px 0 -2px #4b3e3e, -55px 30px 0 -4px #4b3e3e;
transform: scale(.35)
}
/* 3 */
#Mizuki .body .flowers .flower3 {
width: 20px;
height: 20px;
margin: auto;
border-radius: 50%;
background: #7f2738;
border: 2px solid #623436;
position: absolute;
z-index: 2;
box-sizing: content-box;
top: 115px;
right: calc(50% - 60px);
box-shadow: -10px -10px 0 -11px #c28e6e, -13px -15px 0 -11px #c28e6e, -10px -20px 0 -11px #c28e6e, -5px -30px 0 -11px #c28e6e, 0px -30px 0 -11px #c28e6e, 5px -35px 0 -11px #c28e6e, 10px -33px 0 -11px #c28e6e, 19px -28px 0 -11px #c28e6e, 23px -27px 0 -11px #c28e6e, 25px -23px 0 -11px #c28e6e,
21px -9px 0px -2px #7f2738, 21px -9px 0px 0px #623436,
14px 5px 0 -7px #7f2738, 14px 5px 0 -5px #623436,
8px -12px 2px -9px #7f2738, 8px -12px 0 -6px #3a2418,
0px -15px 0 -11px #3a2418, 5px -20px 0 -11px #3a2418, 11px -20px 0 -11px #3a2418,
9px -13px 0px 4px #c28e6e,
-14px -14px 0 1px #7f2738, -14px -14px 0 3px #623436,
0px -33px 0 2px #7f2738, 0px -34px 0 2px #865940, 0px -33px 0 4px #623436,
22px -25px 0 1px #7f2738, 23px -25px 0 1px #865940, 22px -25px 0 3px #623436,
7px 13px 0 -7px #7f2738, 7px 13px 0 -6px #623436,
-12px 2px 0 -6px #7f2738, -12px 3px 0 -6px #865940, -12px 3px 0 -5px #623436,
-5px 12px 0 -6px #7f2738, -5px 13px 0 -6px #865940, -5px 13px 0 -5px #623436,
33px -12px 0 -5px #7f2738, 34px -12px 0 -4px #623436,
16px -40px 0 -4px #7f2738, 17px -40px 0 -4px #865940, 16px -40px 0 -3px #623436,
28px -43px 0 -6px #7f2738, 29px -45px 0 -6px #865940, 28px -44px 0 -5px #623436,
-17px -31px 0 -4px #7f2738, -17px -32px 0 -4px #865940, -17px -32px 0 -3px #623436;
transform: rotateY(-180deg) rotateZ(50deg);
}
#Mizuki .body .flowers .flower3::before {
content: '';
position: absolute;
z-index: -1;
width: 10px;
height: 25px;
background: none;
top: 7px;
left: 34px;
border:none;
border-left: 4px solid #3e3d3c;
border-radius: 10px 0 0 3px;
transform: rotate(-60deg);
}
#Mizuki .body .flowers .flower3::after {
content: '';
width: 20px;
height: 20px;
background: #ad6f41;
border: 1px solid #e6b28c;
border-radius: 50%;
position: absolute;
right: 20px;
bottom: 55px;
z-index: 1;
box-shadow: inset 0 0 2px 5px #865940,
12px 0px 0 0 #7d1b2b, 16px 0 0 0 #865940, 18px 0px 0 0px #623436,
5px 15px 0 0 #7d1b2b, 7px 17px 0 0 #865940, 8px 19px 0 0 #623436,
-13px 10px 0 0 #7d1b2b, -14px 12px 0 0 #623436,
-15px -8px 0 0 #7d1b2b, -17px -10px 0 0 #865940, -19px -13px 0 0 #623436,
3px -14px 0 0 #7d1b2b, 5px -16px 0 0 #865940, 7px -18px 0 0 #623436,
-50px -65px 0 -5px #4b3e3e, -30px -55px 0 -2px #4b3e3e, -55px -45px 0 -2px #4b3e3e, -7px -45px 0 -4px #4b3e3e, -30px -35px 0 -5px #4b3e3e, -50px -20px 0 -4px #4b3e3e,
-60px 80px 0 1px #4b3e3e, -95px 80px 0 -2px #4b3e3e, -78px 55px 0 -3px #4b3e3e, -78px 100px 0 -4px #4b3e3e;
transform: scale(.35)
}
/* SIDE
**********************************
*/
#Mizuki .body .flowers .sides {
width: 100%;
height: 300px;
border-top-left-radius: 30%;
border-top-right-radius: 30%;
position: relative;
top:-130px;
overflow: hidden;
}
#Mizuki .body .flowers .sides::after {
content: '';
width: 100%;
height: 270px;
position: absolute;
top: 20px;
border-radius: 20%;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
z-index: 9;
opacity: .7;
box-shadow: inset 20px 0px 15px -10px #a2826d, inset -20px 0px 15px -10px #a2826d;
}
/* lefts */
#Mizuki .body .flowers .sides .lefts .flower {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
top:70px;
left: 13px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-5px 0 0 5px #81152b, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #623436;
transform: scale(1.5) rotateX(0deg) rotateY(55deg) rotateZ(-10deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .lefts .flower3 {
left:-154px;
top:117px;
transform: scale(0.9) rotateX(0deg) rotateY(55deg) rotateZ(0deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .lefts .flower3::after,
#Mizuki .body .flowers .sides .lefts .flower3::before {
display: none
}
#Mizuki .body .flowers .sides .lefts .flower1 {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
top:170px;
left: 10px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-5px 0 0 5px #81152b, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #623436;
transform: scale(1.5) rotateX(0deg) rotateY(130deg) rotateZ(90deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .lefts .flower1::after {
content: '';
position: absolute;
width: 5px;
height: 15px;
background: none;
top: 0px;
left: -20px;
border: 3px solid #3e363a;
border-left:none;
border-top:none;
border-radius: 0 2px 4px 0;
transform: rotate(60deg)
}
#Mizuki .body .flowers .sides .lefts .flower1rev {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
bottom:50px;
left: 20px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-5px 0 0 5px #81152b, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #623436;
transform: scale(1.8) rotateX(20deg) rotateY(50deg) rotateZ(120deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .lefts .flower1rev::after {
content: '';
position: absolute;
width: 5px;
height: 15px;
background: none;
bottom: 0px;
left: 11px;
border: 3px solid #3e363a;
border-left:none;
border-top:none;
border-radius: 0 2px 4px 0;
transform: rotate(0deg)
}
/* rights */
#Mizuki .body .flowers .sides .rights .flower3 {
right:06px;
top:110px;
transform: scale(0.8) rotateX(0deg) rotateY(125deg) rotateZ(0deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .rights .flower3::after {
right:-30px;
top: -95px;
box-shadow: inset 0 0 2px 5px #865940,
12px 0px 0 0 #7d1b2b, 16px 0 0 0 #865940, 18px 0px 0 0px #623436,
5px 15px 0 0 #7d1b2b, 7px 17px 0 0 #865940, 8px 19px 0 0 #623436,
-13px 10px 0 0 #7d1b2b, -14px 12px 0 0 #623436,
-15px -8px 0 0 #7d1b2b, -17px -10px 0 0 #865940, -19px -13px 0 0 #623436,
3px -14px 0 0 #7d1b2b, 5px -16px 0 0 #865940, 7px -18px 0 0 #623436;
transform: scale(.5);
}
#Mizuki .body .flowers .sides .rights .flower3::before {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
top: -50px;
right: 0px;
box-shadow: 0 2px 0 2px #504647, -19px 0px 0 4px #504647, -38px 0px 0 3px #504647, -19px -15px 0 3px #504647, -5px -8px 0 4px #504647, -30px -8px 0 2px #504647,
-50px 90px 0 2px #504647, -35px 89px 0 3px #504647, -17px 92px 0 2px #504647, -30px 99px 0 3px #504647, -45px 99px 0 2px #504647, -35px 107px 0 2px #504647;
transform: scale(1) rotateX(0deg) rotateY(125deg) rotateZ(0deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .rights .flower1 {
width: 1px;
height: 1px;
margin: auto;
border-radius: 50%;
background: #7f2738;
position: absolute;
top:190px;
right: 20px;
box-shadow: 0 0 2px 1px #7f2738, 0 0 5px 1px #000, 0 0 0 1px #4f1711,
3px 0 0 0px #4f1711, -3px 0 0 0px #4f1711, 0px 3px 0 0px #4f1711, 0px -3px 0 0px #4f1711,-2px 2px 0 0px #4f1711, 2px -2px 0 0px #4f1711, 2px 2px 0 0px #4f1711, -2px -2px 0 0px #4f1711,
0 0 0 4px #c28e6e,
-5px 0 0 5px #81152b, -6px 0 0 5px #623436,
-2px 4px 0 5px #81152b, -3px 5px 0 5px #623436,
2px 4px 0 5px #81152b, 3px 5px 0 5px #623436,
5px -2px 0 5px #81152b, 6px -3px 0 5px #623436,
0px -4px 0 5px #81152b, 0px -5px 0 5px #623436,
5px -7px 0 3px #81152b, 5px -8px 0 3px #623436,
8px 2px 0 3px #81152b, 9px 3px 0 3px #623436,
0px 8px 0 3px #81152b, 0px 9px 0 3px #623436;
transform: scale(2) rotateX(0deg) rotateY(130deg) rotateZ(90deg);
transform-style: preserve-3d;
transform-origin: center;
}
#Mizuki .body .flowers .sides .rights .flower1::after {
content: '';
width: 20px;
height: 20px;
background: #ad6f41;
border: 1px solid #e6b28c;
border-radius: 50%;
position: absolute;
right: -27px;
bottom: -7px;
z-index: 1;
box-shadow: inset 0 0 2px 5px #865940,
12px 0px 0 0 #7d1b2b, 16px 0 0 0 #865940, 18px 0px 0 0px #623436,
5px 15px 0 0 #7d1b2b, 7px 17px 0 0 #865940, 8px 19px 0 0 #623436,
-13px 10px 0 0 #7d1b2b, -14px 12px 0 0 #623436,
-15px -8px 0 0 #7d1b2b, -17px -10px 0 0 #865940, -19px -13px 0 0 #623436,
3px -14px 0 0 #7d1b2b, 5px -16px 0 0 #865940, 7px -18px 0 0 #623436;
transform: scale(.23)
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-21112252311080741452019-02-05T05:46:00.001-08:002022-12-06T06:00:27.842-08:00Play Button<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLOtJYAECHoMQgkapKEzfm_TmSm80frLrkzP0paKS3qBaKSqlSHSLP3wtB1cruUccaqIYg2mxRJQU8a3PM4YadeF66kdMjRTJSA0cSA7rDGY9x_7tIHZG0UZyzPdTdHsr6d9PlSLFo5hi3sleGIN0q4HvV5PwbzsSeoBbYN6N2dz1O8gDBWoLK0M1z/s1600/FlyBirdsBOX-Play_Pause.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="743" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLOtJYAECHoMQgkapKEzfm_TmSm80frLrkzP0paKS3qBaKSqlSHSLP3wtB1cruUccaqIYg2mxRJQU8a3PM4YadeF66kdMjRTJSA0cSA7rDGY9x_7tIHZG0UZyzPdTdHsr6d9PlSLFo5hi3sleGIN0q4HvV5PwbzsSeoBbYN6N2dz1O8gDBWoLK0M1z/s1600/FlyBirdsBOX-Play_Pause.png"/></a></div>
<span><a name='more'></a></span>
<div id="play-wrap" class="static-border">
<div class="audio-wrapper">
<div class="waves">
<div></div>
<div></div>
</div>
<div class="spinner-center">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="play-button"></div>
</div>
<audio data-bpm="126" loop="loop">
<source src="https://dl.dropbox.com/s/mcpvct5vwixdrfp/Les.mp3" type="audio/mp3"/>
<source src="https://dl.dropbox.com/s/1vcfxzk7mlgkqux/Les.ogg" type="audio/ogg"/>
</audio>
</div>
<style>
#play-wrap {
width: 100%;
height: 500px;
position: relative;
overflow:hidden;
background: #701e71;
background: -webkit-linear-gradient(to top, #0d1d61, #a90065);
background: linear-gradient(to top, #0d1d61, #a90065);
background-blend-mode: screen;
background-size: cover;
}
.wave-wrapper {
width: 650px;
height: 230px;
}
/* A U D I O P L A Y E R */
.audio-wrapper,
.waves {
display: block;
width: 200px;
height: 200px;
position: absolute;
z-index:0;
cursor: pointer;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 110px);
}
/* a n i m a c j e - s p i n n e r */
.spinner-center {
height: 200px;
width: 200px;
position: absolute;
z-index:0;
top:calc(50% - 100px);
left:calc(50% - 100px);
pointer-events: none;
border-radius: 50%;
}
.spinner-center div {
content:'';
display:block;
position: absolute;
top:calc(50% - 53px);
left:calc(50% - 50px);
height: 100px;
width: 100px;
border-radius: 50%;
}
.spinner-center div:nth-child(4) {
border: 2px solid #d4701a;
box-shadow: 0 0 15px 5px #d4701a;
-webkit-animation: spinner1 2s alternate ease-in-out infinite;
-moz-animation: spinner1 2s alternate ease-in-out infinite;
animation: spinner1 2s alternate ease-in-out infinite;
}
.spinner-center div:nth-child(3) {
border: 1px solid #ea5015;
box-shadow: 0 0 20px 2px #ea5015;
-webkit-animation: spinner1 2s alternate-reverse ease-in-out infinite;
-moz-animation: spinner1 2s alternate-reverse ease-in-out infinite;
animation: spinner1 2s alternate-reverse ease-in-out infinite;
}
.spinner-center div:first-child {
background: #2f063c;
border: 1px solid #f30e0e;
box-shadow: 0 0 15px 3px #f30e0e;
-webkit-animation: spinner2 2s alternate-reverse ease-in-out infinite;
-moz-animation: spinner2 2s alternate-reverse ease-in-out infinite;
animation: spinner2 2s alternate-reverse ease-in-out infinite;
}
.spinner-center div:nth-child(2) {
border: 2px solid #e00f5d;
box-shadow: 0 0 20px 5px #e00f5d;
-webkit-animation: spinner2 2s alternate ease-in-out infinite;
-moz-animation: spinner2 2s alternate ease-in-out infinite;
animation: spinner2 2s alternate ease-in-out infinite;
}
@-webkit-keyframes spinner1 {
0%{
-webkit-transform: rotate(43deg) scale(.95) translateX(-2px);
}
20%{
border-top-right-radius:40px;
}
50%{
border-top-left-radius:50px;
}
100%{
border-bottom-right-radius:10px;
-webkit-transform: rotate(45deg);
}
}
@-moz-keyframes spinner1 {
0%{
-moz-transform: rotate(43deg) scale(.95) translateX(-2px);
}
20%{
border-top-right-radius:40px;
}
50% {
border-top-left-radius:50px;
}
100% {
border-bottom-right-radius:10px;
-moz-transform: rotate(45deg);
}
}
@keyframes spinner1 {
0%{
-webkit-transform: rotate(43deg) scale(.95) translateX(-2px);
-moz-transform: rotate(43deg) scale(.95) translateX(-2px);
-ms-transform: rotate(43deg) scale(.95) translateX(-2px);
-o-transform: rotate(43deg) scale(.95) translateX(-2px);
transform:rotate(43deg) scale(.95) translateX(-2px);
}
20%{
border-top-right-radius:40px;
}
50% {
border-top-left-radius:50px;
}
100% {
border-bottom-right-radius:10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform:rotate(45deg);
}
}
@-webkit-keyframes spinner2 {
0%{
-webkit-transform: rotate(43deg) scale(.9) translateX(-3px);
}
20%{
border-top-left-radius:30px;
}
50%{
border-top-left-radius:50px;
}
100% {
border-bottom-right-radius:40px;
-webkit-transform: rotate(45deg);
}
}
@-moz-keyframes spinner2 {
0%{
-moz-transform: rotate(43deg) scale(.9) translateX(-3px);
}
20%{
border-top-left-radius:30px;
}
50%{
border-top-left-radius:50px;
}
100% {
border-bottom-right-radius:40px;
-moz-transform: rotate(45deg);
}
}
@keyframes spinner2 {
0%{
-webkit-transform: rotate(43deg) scale(.9) translateX(-3px);
-moz-transform: rotate(43deg) scale(.9) translateX(-3px);
-ms-transform: rotate(43deg) scale(.9) translateX(-3px);
-o-transform: rotate(43deg) scale(.9) translateX(-3px);
transform:rotate(43deg) scale(.9) translateX(-3px);
}
20%{
border-top-left-radius:30px;
}
50%{
border-top-left-radius:50px;
}
100% {
border-bottom-right-radius:40px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform:rotate(45deg);
}
}
/* p l a y i n g a n i m a t i o n */
.playing .spinner-center div:first-child,
.playing .spinner-center div:last-child {
-webkit-animation-duration: .9s;
-moz-animation-duration: .9s;
animation-duration: .9s;
}
.playing .spinner-center {
-webkit-animation: spin-c 3.9s linear infinite;
-moz-animation: spin-c 3.9s linear infinite;
animation: spin-c 3.9s linear infinite;
}
@-webkit-keyframes spin-c {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes spin-c {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
@keyframes spin-c {
from {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* A U D I O W A V E S */
.waves,
.waves::before,
.waves::after {
content:'';
display:block;
position: absolute;
z-index: 0;
border-radius: 50%;
}
.waves {
width: 200px;
height: 200px;
background: none;
box-shadow: 0 0 80px 40px #71005e;
}
.waves::before {
width: 200px;
height: 200px;
background: #7d0065;
box-shadow: 0 0 50px 20px #7d0065;
}
.waves::after {
top:50px;
left:50px;
width: 100px;
height: 100px;
box-shadow: 0 0 35px 20px #990761, 0 0 50px 40px #48034a;
}
.waves div {
position: absolute;
top:-20px;
right:-20px;
-webkit-animation: pulse 1.9s ease-in-out alternate infinite;
-moz-animation: pulse 1.9s ease-in-out alternate infinite;
animation: pulse 1.9s ease-in-out alternate infinite;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
opacity:1;
-webkit-filter: blur(0);
}
to {
-webkit-transform: scale(1.05);
opacity:.7;
-webkit-filter: blur(3px);
}
}
@-moz-keyframes pulse {
from {
-moz-transform: scale(1);
opacity:1;
}
to {
-moz-transform: scale(1.05);
opacity:.7;
}
}
@keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity:1;
filter: blur(0);
-webkit-filter: blur(0);
}
to {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
opacity:.7;
filter: blur(3px);
-webkit-filter: blur(3px);
}
}
.waves div:first-child {
width: 255px;
height: 255px;
border-radius: 50% 45% 60% 45%;
box-shadow:
-2px 5px 15px -5px #481a5f,
-5px 10px 15px -5px #9e0061,
-5px 10px 15px -10px #c14213,
-10px 15px 25px -13px #8e1c57,
10px 20px 60px 0px #481a5f;
}
.waves div:last-child {
width: 360px;
height: 360px;
border-radius: 90% 50% 50% 50%;
box-shadow:
-5px -15px 25px -5px #9e0064,
-10px -15px 20px -15px #c14213,
-20px -20px 60px -20px #481a5f;
}
/* P L A Y B U T T O N */
.play-button {
width: 0px;
height: 30px;
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0 20px 30px;
cursor: pointer;
position: relative;
left: calc(50% - 10px);
top: calc(50% - 25px);
border-radius: 2px;
opacity:0.8;
z-index: 2;
-webkit-filter: drop-shadow(3px 2px 0px rgba(214, 163, 20, 1));
filter: drop-shadow(3px 2px 0px rgba(214, 163, 20, 1));
-webkit-animation: play 1.5s ease-out forwards;
-moz-animation: play 1.5s ease-out forwards;
animation: play 1.5s ease-out forwards;
}
@-webkit-keyframes play {
0% {
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0px;
background: white;
box-shadow: 20px 0px 0px #fbf1e2;
border-radius: 1px;
}
20% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 20px 0px 0 #fbf1e2;
border-radius: 2px;
background:rgb(255, 255, 255);
}
30% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 10px 0px 0 #fbf1e2;
background:rgb(255, 255, 255);
}
50% {
width: 15px;
height: 10px;
border-width: 0px;
border-color: #fbf1e2;
border-radius: 50%;
box-shadow: 5px 0px 0 rgba(255, 255, 255, .5);
background:rgb(255, 255, 255);
}
60% {
width: 10px;
height: 10px;
box-shadow: none;
background:#fbf1e2;
}
65% {
width: 10px;
height: 30px;
box-shadow: none;
background:#fbf1e2);
}
80% {
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 10px;
background:#fbf1e2;
}
85% {
background:none;
}
100% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 30px;
border-radius: 1px;
background: none;
box-shadow: none;
}
}
@-moz-keyframes play {
0% {
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0px;
background: white;
box-shadow: 20px 0px 0px #fbf1e2;
border-radius: 1px;
}
20% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 20px 0px 0 #fbf1e2;
border-radius: 2px;
background:rgb(255, 255, 255);
}
30% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 10px 0px 0 #fbf1e2;
background:rgb(255, 255, 255);
}
50% {
width: 15px;
height: 10px;
border-width: 0px;
border-color: #fbf1e2;
border-radius: 50%;
box-shadow: 5px 0px 0 rgba(255, 255, 255, .5);
background:rgb(255, 255, 255);
}
60% {
width: 10px;
height: 10px;
box-shadow: none;
background:#fbf1e2;
}
65% {
width: 10px;
height: 30px;
box-shadow: none;
background:#fbf1e2);
}
80% {
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 10px;
background:#fbf1e2;
}
85% {
background:none;
}
100% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 30px;
border-radius: 1px;
background: none;
box-shadow: none;
}
}
@keyframes play {
0% {
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0px;
background: white;
box-shadow: 20px 0px 0px #fbf1e2;
border-radius: 1px;
}
20% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 20px 0px 0 #fbf1e2;
border-radius: 2px;
background:rgb(255, 255, 255);
}
30% {
width: 10px;
height: 10px;
border-width: 0px;
box-shadow: 10px 0px 0 #fbf1e2;
background:rgb(255, 255, 255);
}
50% {
width: 15px;
height: 10px;
border-width: 0px;
border-color: #fbf1e2;
border-radius: 50%;
box-shadow: 5px 0px 0 rgba(255, 255, 255, .5);
background:rgb(255, 255, 255);
}
60% {
width: 10px;
height: 10px;
box-shadow: none;
background:#fbf1e2;
}
65% {
width: 10px;
height: 30px;
box-shadow: none;
background:#fbf1e2);
}
80% {
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 10px;
background:#fbf1e2;
}
85% {
background:none;
}
100% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent #fbf1e2;
border-style: solid;
border-width: 20px 0px 20px 30px;
border-radius: 1px;
background: none;
box-shadow: none;
}
}
.playing .play-button {
-webkit-animation: pause 1s ease-out forwards;
-moz-animation: pause 1s ease-out forwards;
animation: pause 1s ease-out forwards;
}
@-webkit-keyframes pause {
0% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-width: 20px 0px 20px 30px;
background: none;
}
20% {
width: 10px;
height: 30px;
border-width: 20px 0px 20px 10px;
background: none;
}
30% {
width: 10px;
border-color: rgb(255, 255, 255);
border-width: 10px 0px 10px 10px;
background: none;
}
40% {
border-radius: 2px;
background:rgb(255, 255, 255);
}
50% {
height: 10px;
width: 10px;
border-radius: 50%;
box-shadow: none;
background:rgb(255, 255, 255);
}
60% {
width: 20px;
height: 10px;
border-width: 0;
background:rgb(255, 255, 255);
}
80% {
width: 10px;
height: 10px;
box-shadow: 20px 0px 0 rgba(250,250,250,.6);
background:rgb(255, 255, 255);
}
100% {
border-radius: 1px;
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0;
box-shadow: 20px 0px 0 rgba(250,250,250,1);
background:rgb(255, 255, 255);
}
}
@-moz-keyframes pause {
0% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-width: 20px 0px 20px 30px;
background: none;
}
20% {
width: 10px;
height: 30px;
border-width: 20px 0px 20px 10px;
background: none;
}
30% {
width: 10px;
border-color: rgb(255, 255, 255);
border-width: 10px 0px 10px 10px;
background: none;
}
40% {
border-radius: 2px;
background:rgb(255, 255, 255);
}
50% {
height: 10px;
width: 10px;
border-radius: 50%;
box-shadow: none;
background:rgb(255, 255, 255);
}
60% {
width: 20px;
height: 10px;
border-width: 0;
background:rgb(255, 255, 255);
}
80% {
width: 10px;
height: 10px;
box-shadow: 20px 0px 0 rgba(250,250,250,.6);
background:rgb(255, 255, 255);
}
100% {
border-radius: 1px;
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0;
box-shadow: 20px 0px 0 rgba(250,250,250,1);
background:rgb(255, 255, 255);
}
}
@keyframes pause {
0% {
width: 0px;
height: 30px;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-width: 20px 0px 20px 30px;
background: none;
}
20% {
width: 10px;
height: 30px;
border-width: 20px 0px 20px 10px;
background: none;
}
30% {
width: 10px;
border-color: rgb(255, 255, 255);
border-width: 10px 0px 10px 10px;
background: none;
}
40% {
border-radius: 2px;
background:rgb(255, 255, 255);
}
50% {
height: 10px;
width: 10px;
border-radius: 50%;
box-shadow: none;
background:rgb(255, 255, 255);
}
60% {
width: 20px;
height: 10px;
border-width: 0;
background:rgb(255, 255, 255);
}
80% {
width: 10px;
height: 10px;
box-shadow: 20px 0px 0 rgba(250,250,250,.6);
background:rgb(255, 255, 255);
}
100% {
border-radius: 1px;
width: 10px;
height: 30px;
left: calc(50% - 17px);
top: calc(50% - 15px);
border-width: 0;
box-shadow: 20px 0px 0 rgba(250,250,250,1);
background:rgb(255, 255, 255);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
setTimeout(function(){
$('div.home-hide').removeClass("hidden");
},2000);
});
$(document).ready(function(){
$(".stack").lettering();
$(".audio-wrapper").click(function(){
var $this = $(this),
audio = $this.siblings("audio")[0],
bpm = Number($this.siblings("audio").data('bpm'));
pulse = (60/bpm)*1000;
if(audio.paused == false) {
audio.pause();
audio.currentTime = 0;
$this.removeClass("playing");
clearInterval(intervals);
} else {
audio.play();
$this.addClass("playing");
pulsing();
intervals = setInterval(function() {pulsing()}, pulse);
}
function pulsing() {
$(".waves").addClass("pulse");
setTimeout(function() {
$(".waves").removeClass('pulse');
}, pulse-100);
}
});
});
</script>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-32936894927688919882018-04-23T06:43:00.001-07:002022-12-06T05:45:54.711-08:00Zodiac<div class="separator" style="display:none;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXraDMCwwqgxYh49ulYanu1t51Z9JIxYrP1pQM4_4zrpgvxqaHbxMQUI_pES1UPZSZntoKO8k1PD_5ZOuKiFlR2CbaXsUN3KyeJrX0eEryA5j58Mp7igCyhN5b-Q3O4ktq61UMnWd0pjAs2aUv6nS5sQ2wz1Ev_Ss8xYm1y3dxt57oNeKMOudhrwy/s1600/FlyBirdsBOX-Zodiac2.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1446" data-original-width="1370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXraDMCwwqgxYh49ulYanu1t51Z9JIxYrP1pQM4_4zrpgvxqaHbxMQUI_pES1UPZSZntoKO8k1PD_5ZOuKiFlR2CbaXsUN3KyeJrX0eEryA5j58Mp7igCyhN5b-Q3O4ktq61UMnWd0pjAs2aUv6nS5sQ2wz1Ev_Ss8xYm1y3dxt57oNeKMOudhrwy/s1600/FlyBirdsBOX-Zodiac2.jpg"/></a></div>
<div class="separator" style="display:none;"><img alt="" border="0" data-original-height="1488" data-original-width="1730" src="https://blogger.googleusercontent.com/img/a/AVvXsEj497KH-D-nMKMtbw8azA_sFZ0Nrruk8_DP6ad3CDSAqpdlhdRhVPiPkXOhdxd699O2Ws-I_E6BlH_SzLBYR9ktrECxSMn4svyhY_Tf-S7TB3mGFT8bdEkCuzzgVW0KruzZ__wCXQBwf5gM4Vvg3wQ3FL906mirnQpFlmzcpNVTs73VSoUKfriDrcWJ"/></div>
<span><a name='more'></a></span>
<div id="Zodiac">
<div class="sign-wrap static-border" id="one">
<div class="sign">
<div class="Aries"></div>
</div>
</div>
<div class="sign-wrap static-border" id="two">
<div class="sign">
<div class="Taurus"></div>
</div>
</div>
<div class="sign-wrap static-border" id="three">
<div class="sign">
<div class="Gemini"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="four">
<div class="sign">
<div class="Cancer"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="five">
<div class="sign">
<div class="Leo"></div>
</div>
</div>
<div class="sign-wrap static-border" id="six">
<div class="sign">
<div class="Virgo"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="seven">
<div class="sign">
<div class="Libra"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="eight">
<div class="sign">
<div class="Scorpio"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="nine">
<div class="sign">
<div class="Sagittarius"></div>
</div>
</div>
<div class="sign-wrap static-border" id="ten">
<div class="sign">
<div class="Capricorn"></div>
</div>
</div>
<div class="sign-wrap static-border" id="eleven">
<div class="sign">
<div class="Aquarius"><p></p></div>
</div>
</div>
<div class="sign-wrap static-border" id="twelve">
<div class="sign">
<div class="Pisces"></div>
</div>
</div>
</div>
<style>
#Zodiac *,#Zodiac *:before,#Zodiac *:after {box-sizing: border-box;}
#Zodiac {margin:25px 0; padding:25px; text-align:center; box-sizing: border-box;}
#Zodiac p {margin:0; padding:0!important; box-sizing: border-box;}
.sign-wrap {background:white; width:300px; height:300px; margin:25px; padding:0;display:inline-block;}
.sign {position:relative; width:200px; height:200px; margin:50px auto 0; border:1px solid #999}
/* one */
.Aries {
position: absolute;
bottom: 50px;
left: 100px;
width: 50px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 50%;
-webkit-border-bottom-right-radius: 0%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 50%;
border-left: 5px solid #333;
border-top: 10px solid #333;
}
.Aries::before {
content:'';
display: block;
position: absolute;
left:-50px;
top:-10px;
width: 50px;
height: 95px;
border-radius:100%;
-webkit-border-bottom-left-radius: 0%;
-webkit-border-bottom-right-radius: 50%;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 100%;
border-right: 1px solid #333;
border-top: 10px solid #333;
}
/* two */
.Taurus {
position: absolute;
bottom: 50px;
left: 70px;
width: 70px;
height: 70px;
border-radius:100%;
border-left: 10px solid #333;
border-top: 5px solid #333;
border-right: 2px solid #333;
border-bottom: 1px solid #333;
}
.Taurus::before {
content:'';
display: block;
position: absolute;
left:-10px;
top:-50px;
width: 70px;
height: 50px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 0%;
-webkit-border-top-right-radius: 100%;
border-right: 1px solid #333;
border-bottom: 10px solid #333;
}
/* three */
.Gemini {
position: absolute;
bottom: 60px;
left: 110px;
width: 40px;
height: 70px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 0%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 0%;
border-left: 8px solid #333;
}
.Gemini::before {
content:'';
display: block;
position: absolute;
left:-70px;
top:0px;
width: 40px;
height: 70px;
border-radius:100%;
-webkit-border-bottom-left-radius: 0%;
-webkit-border-bottom-right-radius: 100%;
-webkit-border-top-left-radius: 0%;
-webkit-border-top-right-radius: 100%;
border-right: 8px solid #333;
}
.Gemini p::before {
content:'';
display: block;
position: absolute;
left:-65px;
top:-40px;
width: 90px;
height: 40px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 0%;
-webkit-border-top-right-radius: 100%;
border-right: 1px solid #333;
border-bottom:4px solid #333;
}
.Gemini p::after {
content:'';
display: block;
position: absolute;
left:-65px;
bottom:-40px;
width: 90px;
height: 40px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 4px solid #333;
}
/* four */
.Cancer {
content:'';
display: block;
position: absolute;
left:50px;
top:55px;
width: 100px;
height: 60px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 110%;
border-top: 4px solid #333;
border-right: 6px solid #333;
}
.Cancer::after {
content:'';
display: block;
position: absolute;
left:55px;
top:10px;
width: 45px;
height: 40px;
border-radius:100%;
border-bottom: 5px solid #333;
border-left: 1px solid #333;
border-right: 7px solid #333;
}
.Cancer p {
content:'';
display: block;
position: absolute;
left:0px;
top:10px;
width: 100px;
height: 60px;
border-radius:100%;
-webkit-border-bottom-left-radius: 110%;
-webkit-border-bottom-right-radius: 100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-bottom: 4px solid #333;
border-left: 6px solid #333;
}
.Cancer p::after {
content:'';
display: block;
position: absolute;
left:-5px;
top:10px;
width: 45px;
height: 40px;
border-radius:100%;
border-bottom: 5px solid #333;
border-left: 1px solid #333;
border-right: 7px solid #333;
}
/* five */
.Leo {
position: absolute;
bottom: 55px;
left: 50px;
width: 50px;
height: 50px;
border-radius:100%;
border-left: 10px solid #333;
border-top: 5px solid #333;
border-right: 2px solid #333;
border-bottom: 1px solid #333;
}
.Leo::before {
content:'';
display: block;
position: absolute;
left:20px;
top:-50px;
width: 50px;
height: 60px;
border-radius:100%;
border-right: 5px solid #333;
border-top: 10px solid #333;
border-left: 1px solid #333;
}
.Leo::after {
content:'';
display: block;
position: absolute;
left:50px;
top:0px;
width: 40px;
height: 50px;
border-radius:100%;
border-bottom: 1px solid #333;
border-left: 5px solid #333;
}
/* six */
.Virgo {
position: absolute;
bottom: 50px;
left: 50px;
width: 20px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:50%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 1px solid #333;
border-right: 5px solid #333;
}
.Virgo::before {
content:'';
display: block;
position: absolute;
left:20px;
top:0;
width: 25px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:50%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 10px solid #333;
border-right: 5px solid #333;
}
.Virgo::after {
content:'';
display: block;
position: absolute;
left:45px;
top:0;
width: 25px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:50%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 10px solid #333;
border-right: 5px solid #333;
}
.Virgo p {
position: absolute;
bottom: -30px;
left: 60px;
width: 30px;
height: 90px;
border-radius:100%;
-webkit-border-bottom-left-radius: 0%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
border-top: 10px solid #333;
border-right: 2px solid #333;
}
.Virgo p::after {
content:'';
display: block;
position: absolute;
left: 12px;
top: 41px;
width: 25px;
height: 30px;
border-radius:100%;
-webkit-border-bottom-right-radius:10%;
-webkit-border-top-left-radius: 10%;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
border-bottom: 1px solid #333;
border-left: 5px solid #333;
}
/* seven */
.Libra {
position: absolute;
top: 60px;
left: 70px;
width: 60px;
height: 60px;
border-radius:100%;
border-left: 10px solid #333;
border-top: 5px solid #333;
border-right: 2px solid #333;
}
.Libra::before {
content:'';
display: block;
position: absolute;
left:30px;
top:55px;
width: 30px;
height: 60px;
border-radius:10%;
border-top: 5px solid #333;
}
.Libra::after {
content:'';
display: block;
position: absolute;
left:-20px;
top:55px;
width: 30px;
height: 60px;
border-radius:10%;
border-top: 5px solid #333;
}
.Libra p {
position: absolute;
bottom: -25px;
left: -25px;
width: 90px;
height: 10px;
border-radius:100%;
-webkit-border-bottom-left-radius: 0%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 5px solid #333;
border-right: 1px solid #333;
}
/* eight */
.Scorpio {
position: absolute;
bottom: 50px;
left: 50px;
width: 20px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:50%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 1px solid #333;
border-right: 5px solid #333;
}
.Scorpio::before {
content:'';
display: block;
position: absolute;
left:20px;
top:0;
width: 25px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:50%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 10px solid #333;
border-right: 5px solid #333;
}
.Scorpio::after {
content:'';
display: block;
position: absolute;
left:45px;
top:0;
width: 25px;
height: 100px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:0%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 10px solid #333;
border-right: 5px solid #333;
}
.Scorpio p {
display: block;
position: absolute;
left: 65px;
top: 90px;
width: 25px;
height: 30px;
border-radius:100%;
-webkit-border-bottom-right-radius:10%;
-webkit-border-top-left-radius: 10%;
border-bottom: 1px solid #333;
border-left: 5px solid #333;
}
.Scorpio p::after {
content:'';
display: block;
position: absolute;
left:5px;
top:18px;
width: 20px;
height: 20px;
border-radius:100%;
-webkit-border-bottom-right-radius:0%;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
border-bottom: 4px solid #333;
border-right: 4px solid #333;
}
/* nine */
.Sagittarius {
display: block;
position: absolute;
left:25px;
top:100px;
width: 130px;
height: 10px;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius:100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
border-bottom: 5px solid #333;
border-right: 2px solid #333;
border-left: 1px solid #333;
}
.Sagittarius::after {
content:'';
display: block;
position: absolute;
right:-5px;
top:-10px;
width: 30px;
height: 30px;
border-radius:100%;
-webkit-border-bottom-right-radius:0%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
border-bottom: 5px solid #333;
border-right: 5px solid #333;
}
.Sagittarius::before {
content:'';
display: block;
position: absolute;
left:35px;
top:-10px;
width: 10px;
height: 35px;
border-radius:100%;
border-bottom: 1px solid #333;
border-right: 5px solid #333;
border-top: 2px solid #333;
}
/* ten */
.Capricorn {
content:'';
display: block;
position: absolute;
left:60px;
top:80px;
width: 60px;
height: 60px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 100%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 110%;
border-top: 4px solid #333;
border-right: 10px solid #333;
}
.Capricorn::after {
content:'';
display: block;
position: absolute;
width: 50px;
height: 80px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 10%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 100%;
border-top: 4px solid #333;
border-right: 6px solid #333;
transform: rotate(-130deg);
top:-15px;
left:20px
}
.Capricorn::before{
content:'';
display: block;
position: absolute;
width: 60px;
height: 80px;
border-radius:0%;
-webkit-border-top-left-radius: 20%;
-webkit-border-top-right-radius: 10%;
border-top: 4px solid #333;
top:-22px;
left:5px
}
/* eleven */
.Aquarius,
.Aquarius p {
position: absolute;
top: 80px;
left: 50px;
width: 30px;
height: 20px;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 30%;
-webkit-border-top-left-radius: 30%;
-webkit-border-top-right-radius: 20%;
-webkit-transform: rotate(-33deg);
-moz-transform: rotate(-33deg);
-ms-transform: rotate(-33deg);
-o-transform: rotate(-33deg);
transform: rotate(-33deg);
border-right: 8px solid #333;
border-top: 2px solid #333;
}
.Aquarius::after,
.Aquarius p::after {
content:'';
display: block;
position: absolute;
top: 15px;
left: 23px;
width: 30px;
height: 20px;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 30%;
-webkit-border-top-left-radius: 30%;
-webkit-border-top-right-radius: 20%;
border-right: 8px solid #333;
border-top: 1px solid #333;
}
.Aquarius::before,
.Aquarius p::before {
content:'';
display: block;
position: absolute;
top: 32px;
left: 48px;
width: 30px;
height: 20px;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 30%;
-webkit-border-top-left-radius: 30%;
-webkit-border-top-right-radius: 20%;
border-right: 8px solid #333;
border-top: 1px solid #333;
}
.Aquarius p {
left:-20px;
top:10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* twelve */
.Pisces {
position: absolute;
bottom: 55px;
left: 110px;
width: 40px;
height: 90px;
border-radius:100%;
-webkit-border-bottom-left-radius: 100%;
-webkit-border-bottom-right-radius: 0%;
-webkit-border-top-left-radius: 100%;
-webkit-border-top-right-radius: 0%;
border-left: 8px solid #333;
}
.Pisces::before {
content:'';
display: block;
position: absolute;
left:-70px;
top:0px;
width: 40px;
height: 90px;
border-radius:100%;
-webkit-border-bottom-left-radius: 0%;
-webkit-border-bottom-right-radius: 100%;
-webkit-border-top-left-radius: 0%;
-webkit-border-top-right-radius: 100%;
border-right: 8px solid #333;
}
.Pisces::after {
content:'';
display: block;
position: absolute;
left:-70px;
top:0px;
width: 100px;
height: 50px;
border-radius:100%;
border-right: 1px solid #333;
border-bottom: 5px solid #333;
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-38347392994632356172018-04-23T06:37:00.016-07:002022-12-26T08:27:42.424-08:00Kaleidoscope Sun<div class="separator" style="display:none"><img alt="" border="0" data-original-height="874" data-original-width="1034" src="https://blogger.googleusercontent.com/img/a/AVvXsEhvmFRLJ3iU2GpqpBOQAbRRlMCfSq-oUVvn8ostFA2WE_uC-7GWU1Otrh6hfGbXT_CPILzkt8-is1_c0VomK_RM-KCe75QXZzBgr-MKDupJvZwBE67St123ZvyAgLPp3LwhMh3GwVIlVFm-mm3Alz16qknsLZY1ijOWpRYl1wEjo-C1ugdzi4oja_Sj"/></div>
<div class="separator" style="display:none;"><img alt="" border="0" data-original-height="1132" data-original-width="1249" src="https://blogger.googleusercontent.com/img/a/AVvXsEjsfEWbrK_F3loZ5ttMQdkyBq8BSPuILO6gkzrX30O4ukvhdmO4B03LgLsyw2CCHAYCziyyyiWmvOevZTBDU1o5VzUNgffpU9HS43fcseA-ZFsf28vOsgjPWOZ282vcJR3_e2d_YxSuUEo-LgcH4t4Oiby2uueTK3AxBW72A3_Viaz82erYoXekW-6_"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:none">
<div class="sun-wrap static-border">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<style>
.sun-wrap {background:white; width:300px; max-width:90%; height:300px; margin:10% auto; display:block;border-radius: 100%;}
.sun-wrap ul {
width:100px; height:100px;
border:5px solid #484848;
/* border: 5px double #ffb23d; */
margin:75px auto 0!important;
padding:0!important;
border-radius:100%;
position:relative;
box-shadow: 0 0 50px 0px #7a7a7a;
/* box-shadow: 0 0 10px #cf1717, 0 0 35px #ffb23d, 0 0 5px 0px #cd1e13;*/
-webkit-animation:spin 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
-moz-animation:spin 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
animation:spin 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(200deg) scale(1.3);
}
100% {
-moz-transform: rotate(360deg) scale(1);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(200deg) scale(1.3);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform:rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(200deg) scale(1.3);
transform:rotate(200deg) scale(1.3);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform:rotate(360deg) scale(1);
}
}
.sun-wrap li {position:absolute; list-style:none; width:0; height:0;
-webkit-animation: sun 8s cubic-bezier(0, 0.65, 0.2, 1.54) infinite;
-moz-animation: sun 8s cubic-bezier(0, 0.65, 0.2, 1.54) infinite;
animation: sun 8s cubic-bezier(0, 0.65, 0.2, 1.54) infinite;
animation-fill-mode: both;
}
.sun-wrap li:first-child {top:-30px; left:-20px; transform: rotate(45deg)}
.sun-wrap li:nth-child(2n) {top:25px; left:-40px;}
.sun-wrap li:nth-child(3n) {top:80px; left:-20px; transform: rotate(-45deg)}
.sun-wrap li:nth-child(4n) {top:100px; left:35px; transform: rotate(-90deg)}
.sun-wrap li:nth-child(5n) {top:80px; left:90px; transform: rotate(224deg)}
.sun-wrap li:nth-child(6n) {top:25px; left:110px; transform: rotate(180deg)}
.sun-wrap li:nth-child(7n) {top:-30px; left:90px; transform: rotate(135deg)}
.sun-wrap li:nth-child(8n) {top:-50px; left:35px; transform: rotate(90deg)}
/*
@keyframes sun {
0% {border-right:20px solid #ffb23d; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:0}
11% {border-right:20px solid #cf1717; border-bottom: solid 2px transparent; border-top: solid 20px transparent; margin-top:10px; margin-left:0}
22% {border-right:20px solid #ffb23d; border-bottom: solid 100px transparent; border-top: solid 20px transparent; margin-top:-40px; margin-left:0}
33% {border-right:3px solid #cf1717; border-bottom: solid 100px transparent; border-top: solid 0px transparent; margin-top:-30px; margin-left: 10px}
44% {border-right:2px solid #cd1e13; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-80px; margin-left: 10px}
50% {border-right:20px solid #ef8424; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-80px; margin-left: 0px}
60% {border-right:20px solid #cf1717; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:0}
70% {border-right:5px solid #cf1717; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left: 10px}
80% {border-right:100px solid #ffb23d; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-70px; margin-left:-40px}
90% {border-right:100px solid #ffb23d; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:-40px}
100% {border-right:5px solid #cf1717; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left: 10px}
}
*/
@keyframes sun {
0% {border-right:20px solid #7a7a7a; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:0}
11% {border-right:20px solid #484848; border-bottom: solid 2px transparent; border-top: solid 20px transparent; margin-top:10px; margin-left:0}
22% {border-right:20px solid #484848; border-bottom: solid 100px transparent; border-top: solid 20px transparent; margin-top:-40px; margin-left:0}
33% {border-right:3px solid #7a7a7a; border-bottom: solid 100px transparent; border-top: solid 0px transparent; margin-top:-30px; margin-left: 10px}
44% {border-right:2px solid #484848; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-80px; margin-left: 10px}
50% {border-right:20px solid #484848; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-80px; margin-left: 0px}
60% {border-right:20px solid #7a7a7a; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:0}
70% {border-right:5px solid #7a7a7a; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left: 10px}
80% {border-right:100px solid #484848; border-bottom: solid 100px transparent; border-top: solid 100px transparent; margin-top:-70px; margin-left:-40px}
90% {border-right:100px solid #484848; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left:-40px}
100% {border-right:5px solid #7a7a7a; border-bottom: solid 20px transparent; border-top: solid 20px transparent; margin-top:0px; margin-left: 10px}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-31024157668068469702017-11-06T05:35:00.003-08:002022-12-06T05:36:26.374-08:00Floral Ornament<div class="separator" style="display:none;"><img alt="" border="0" data-original-height="1142" data-original-width="1372" src="https://blogger.googleusercontent.com/img/a/AVvXsEjaH32x7JzH4w0zotiE9RVNcz4w-0Cnj5_ZMlrQGohc9L6a3tzrrmZR1Jz04ckwuSUSJmQGT383Ml3NKvAnIaCgvkeq1N7AQOLgI98wNarkuluIx5EKKSqah8IqGt4N9UJknXASk-bxrQR1kkC5pRnn9nW9e4t9lJ6wWeOcj7I7j-sk64Jhz78WQi_P"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:none">
<div class="FBB" >
<div class="FBB-frame">
<div class="FBB-frame-top">
<div class="FBB-center"></div>
<div class="FBB-main-leaf"></div>
<div class="FBB-left">
<div class="FBB-main-bottom"></div>
<div class="FBB-swirl-first-1"></div>
<div class="FBB-swirl-first-2"></div>
<div class="FBB-leaf-1"></div>
<div class="FBB-leaf-2a"></div>
<div class="FBB-leaf-2b"></div>
<div class="FBB-leaf-2c"></div>
<div class="FBB-swirl-last"></div>
<div class="FBB-leaf-3"></div>
</div>
<div class="FBB-right">
<div class="FBB-main-bottom"></div>
<div class="FBB-swirl-first-1"></div>
<div class="FBB-swirl-first-2"></div>
<div class="FBB-leaf-1"></div>
<div class="FBB-leaf-2a"></div>
<div class="FBB-leaf-2b"></div>
<div class="FBB-leaf-2c"></div>
<div class="FBB-swirl-last"></div>
<div class="FBB-leaf-3"></div>
</div>
</div>
<div class="FBB-content">
Hello
</div>
<div class="FBB-frame-bottom">
<div class="FBB-center"></div>
<div class="FBB-main-leaf"></div>
<div class="FBB-left">
<div class="FBB-main-bottom"></div>
<div class="FBB-swirl-first-1"></div>
<div class="FBB-swirl-first-2"></div>
<div class="FBB-leaf-1"></div>
<div class="FBB-leaf-2a"></div>
<div class="FBB-leaf-2b"></div>
<div class="FBB-leaf-2c"></div>
<div class="FBB-swirl-last"></div>
<div class="FBB-leaf-3"></div>
</div>
<div class="FBB-right">
<div class="FBB-main-bottom"></div>
<div class="FBB-swirl-first-1"></div>
<div class="FBB-swirl-first-2"></div>
<div class="FBB-leaf-1"></div>
<div class="FBB-leaf-2a"></div>
<div class="FBB-leaf-2b"></div>
<div class="FBB-leaf-2c"></div>
<div class="FBB-swirl-last"></div>
<div class="FBB-leaf-3"></div>
</div>
</div>
</div>
</div>
</div>
<style>
.FBB {
background: #fff;
width: 800px;
max-width:90%;
margin: 5% auto;
padding: 4em 0;
outline: 1px solid #e1e1e1;
outline-offset: -10px;
}
/* FRAME
*********************/
.FBB-frame {
margin: auto;
padding: 0;
}
.FBB-content {
text-align: center;
letter-spacing: 10px;
font-size: 5vw;
color: #333;
}
.FBB-frame-top {
position: relative;
width: 600px;
height: 150px;
margin: 0 auto 3%;
background: none;
}
.FBB-left::after,
.FBB-right::after {
content: "";
display: block;
width: 100%;
height: 4px;
background: #333;
position: absolute;
bottom: -10%;
right: 0;
animation: frame-grow 1.2s ease-in-out 1;
-webkit-animation: frame-grow 1.2s ease-in-out 1;
}
@-webkit-keyframes frame-grow {
0% {
width: 0;
opacity: 0;
}
100% {
width: 100%;
}
}
@keyframes frame-grow {
0% {
width: 0;
opacity: 0;
}
100% {
width: 100%;
}
}
/***** LEFT ******/
.FBB-left {
width: 50%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
}
/***** RIGHT ******/
.FBB-right {
width: 50%;
height: 60%;
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
/***** BOTTOM ******/
.FBB-frame-bottom {
position: relative;
width: 600px;
height: 150px;
margin: 3% auto 0;
background: none;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
}
/***** CENTER *******/
.FBB-center {
position: absolute;
bottom: 7%;
left: 48.5%;
width: 3%;
height: 12%;
border-radius: 100%;
background: #333;
animation: center-grow 1.5s ease-out 1;
-webkit-animation: center-grow 1.5s ease-out 1;
}
@keyframes center-grow {
0% {
width: 0;
height: 0;
bottom: 10%;
left: 50%;
opacity: 0;
}
60% {
width: 4%;
height: 15%;
bottom: 5%;
left: 48%;
}
100% {
width: 3%;
height: 12%;
bottom: 7%;
left: 48.5%;
}
}
@-webkit-keyframes center-grow {
0% {
width: 0;
height: 0;
bottom: 10%;
left: 50%;
opacity: 0;
}
60% {
width: 4%;
height: 15%;
bottom: 5%;
left: 48%;
}
100% {
width: 3%;
height: 12%;
bottom: 7%;
left: 48.5%;
}
}
.FBB-center::after {
content: "";
position: absolute;
width: 20%;
height: 20%;
border-radius: 100%;
left: 40%;
top: 40%;
background: #fff;
}
.FBB-main-leaf {
position: absolute;
bottom: 46%;
left: 45.5%;
width: 8%;
height: 33%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: none;
border-left: 4px solid #333;
border-top: 4px solid #333;
animation: main-leaf-grow 1.7s ease-in 1;
-webkit-animation: main-leaf-grow 1.7s ease-in 1;
}
@-webkit-keyframes main-leaf-grow {
0%,
40% {
width: 0;
height: 0;
bottom: 30%;
left: 50%;
opacity: 0;
}
100% {
width: 8%;
height: 33%;
bottom: 46%;
left: 45.5%;
}
}
@keyframes main-leaf-grow {
0%,
40% {
width: 0;
height: 0;
bottom: 30%;
left: 50%;
opacity: 0;
}
100% {
width: 8%;
height: 33%;
bottom: 46%;
left: 45.5%;
}
}
.FBB-main-leaf::before {
content: "";
position: absolute;
bottom: 0;
left: 15.5%;
width: 85%;
height: 85%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
background: #333;
}
.FBB-main-leaf::after {
content: "";
position: absolute;
bottom: -24%;
left: 111%;
width: 15%;
height: 15%;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
background: #333;
}
/***** SWIRLS ******/
.FBB-main-bottom {
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 50px 100px;
bottom: 7%;
right: 5%;
width: 40%;
height: 60%;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
animation: main-bottom-grow 1s ease-in-out 1;
-webkit-animation: main-bottom-grow 1s ease-in-out 1;
}
@-webkit-keyframes main-bottom-grow {
0% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 40%;
height: 60%;
bottom: 7%;
right: 5%;
}
}
@keyframes main-bottom-grow {
0% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 40%;
height: 60%;
bottom: 7%;
right: 5%;
}
}
.FBB-main-bottom::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 0 50px 100px;
bottom: 7%;
right: 7%;
width: 50%;
height: 60%;
border-bottom: 4px solid #333;
}
.FBB-swirl-first-1 {
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 35%;
right: 5%;
width: 50%;
height: 60%;
border-right: 5px solid #333;
animation: swirl-first-1-grow 1.3s ease-in-out 1;
-webkit-animation: swirl-first-1-grow 1.3s ease-in-out 1;
}
@-webkit-keyframes swirl-first-1-grow {
0%,
20% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 50%;
height: 60%;
bottom: 35%;
right: 5%;
}
}
@keyframes swirl-first-1-grow {
0%,
20% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 50%;
height: 60%;
bottom: 35%;
right: 5%;
}
}
.FBB-swirl-first-2 {
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
border-right: 4px solid #333;
animation: swirl-first-2-grow 1.3s ease-in-out 1;
-webkit-animation: swirl-first-2-grow 1.3s ease-in-out 1;
}
@-webkit-keyframes swirl-first-2-grow {
0%,
50% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 50%;
height: 60%;
bottom: 15%;
right: 7%;
}
}
@keyframes swirl-first-2-grow {
0%,
50% {
width: 1%;
height: 5%;
bottom: 10%;
right: 10%;
opacity: 0;
}
100% {
width: 50%;
height: 60%;
bottom: 15%;
right: 7%;
}
}
.FBB-swirl-last {
position: absolute;
border: 0 solid transparent;
border-radius: 150px 250px 150px 0;
bottom: 0;
left: 28%;
width: 25%;
height: 50%;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
border-right: 5px solid #333;
border-top: 4px solid #333;
animation: swirl-last-grow 1.5s ease-out 1;
-webkit-animation: swirl-last-grow 1.5s ease-out 1;
}
@-webkit-keyframes swirl-last-grow {
0%,
50% {
width: 0;
height: 0;
bottom: 30%;
left: 55%;
opacity: 0;
}
100% {
bottom: 0;
left: 28%;
width: 25%;
height: 50%;
}
}
@keyframes swirl-last-grow {
0%,
50% {
width: 0;
height: 0;
bottom: 30%;
left: 55%;
opacity: 0;
}
100% {
bottom: 0;
left: 28%;
width: 25%;
height: 50%;
}
}
.FBB-swirl-last::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 100px;
bottom: 105%;
left: -19%;
width: 30%;
height: 50%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
border-left: 3px solid #333;
border-top: 1px solid #333;
}
.FBB-swirl-last::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 0 10px 3px;
top: -40%;
right: 30%;
width: 40%;
height: 10%;
border-bottom: 2px solid #333;
}
/***** LEAF ******/
.FBB-leaf-1 {
position: absolute;
bottom: 47%;
right: 13%;
width: 11%;
height: 22%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: #333;
animation: leaf-1-grow 1.7s ease-out 1;
-webkit-animation: leaf-1-grow 1.7s ease-out 1;
}
@-webkit-keyframes leaf-1-grow {
0%,
60% {
width: 0;
height: 0;
bottom: 70%;
right: 8%;
opacity: 0;
}
100% {
width: 11%;
height: 22%;
bottom: 47%;
right: 13%;
}
}
@keyframes leaf-1-grow {
0%,
60% {
width: 0;
height: 0;
bottom: 70%;
right: 8%;
opacity: 0;
}
100% {
width: 11%;
height: 22%;
bottom: 47%;
right: 13%;
}
}
.FBB-leaf-1::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
border-right: 3px solid #fff;
}
.FBB-leaf-1::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 50px;
bottom: 55%;
right: 30%;
width: 60%;
height: 100%;
border-left: 3px solid #333;
}
/*****/
.FBB-leaf-2a {
position: absolute;
width: 11%;
height: 19%;
bottom: 70%;
right: 49%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
-o-transform: rotate(160deg);
background: #333;
animation: leaf-2a-grow 1.5s ease-out 1;
-webkit-animation: leaf-2a-grow 1.5s ease-out 1;
}
@-webkit-keyframes leaf-2a-grow {
0%,
80% {
width: 0;
height: 0;
bottom: 70%;
right: 49%;
opacity: 0;
}
100% {
width: 11%;
height: 19%;
bottom: 70%;
right: 49%;
}
}
@keyframes leaf-2a-grow {
0%,
80% {
width: 0;
height: 0;
bottom: 70%;
right: 49%;
opacity: 0;
}
100% {
width: 11%;
height: 19%;
bottom: 70%;
right: 49%;
}
}
.FBB-leaf-2a::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
border-right: 3px solid #fff;
}
.FBB-leaf-2a::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 50px;
bottom: 55%;
right: 30%;
width: 70%;
height: 150%;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
border-left: 3px solid #333;
}
/*****/
.FBB-leaf-2b {
position: absolute;
width: 7%;
height: 12%;
bottom: 75%;
right: 37%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
background: #333;
animation: leaf-2b-grow 1.5s ease-out 1;
-webkit-animation: leaf-2b-grow 1.5s ease-out 1;
}
@-webkit-keyframes leaf-2b-grow {
0%,
50% {
width: 0;
height: 0;
bottom: 70%;
right: 45%;
opacity: 0;
}
100% {
width: 7%;
height: 12%;
bottom: 75%;
right: 37%;
}
}
@keyframes leaf-2b-grow {
0%,
50% {
width: 0;
height: 0;
bottom: 70%;
right: 45%;
opacity: 0;
}
100% {
width: 7%;
height: 12%;
bottom: 75%;
right: 37%;
}
}
.FBB-leaf-2b::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
border-right: 3px solid #fff;
}
.FBB-leaf-2b::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 50px;
bottom: -50%;
right: 90%;
width: 70%;
height: 150%;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
border-top: 3px solid #333;
}
/*****/
.FBB-leaf-2c {
position: absolute;
width: 8%;
height: 18%;
bottom: 45%;
right: 33%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
background: #333;
animation: leaf-2c-grow 1s ease-out 1;
-webkit-animation: leaf-2c-grow 1s ease-out 1;
}
@-webkit-keyframes leaf-2c-grow {
0%,
80% {
width: 0;
height: 0;
bottom: 40%;
right: 40%;
opacity: 0;
}
100% {
width: 8%;
height: 18%;
bottom: 45%;
right: 33%;
}
}
@keyframes leaf-2c-grow {
0%,
80% {
width: 0;
height: 0;
bottom: 40%;
right: 40%;
opacity: 0;
}
100% {
width: 8%;
height: 18%;
bottom: 45%;
right: 33%;
}
}
.FBB-leaf-2c::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
border-right: 3px solid #fff;
}
.FBB-leaf-2c::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 50px;
bottom: -90%;
right: -1%;
width: 80%;
height: 250%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
border-top: 3px solid #333;
}
/*****/
.FBB-leaf-3 {
position: absolute;
width: 8%;
height: 15%;
bottom: 20%;
left: 43%;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-transform: rotate(230deg);
-moz-transform: rotate(230deg);
-ms-transform: rotate(230deg);
-o-transform: rotate(230deg);
background: #333;
animation: leaf-3-grow 1.5s ease-out 1;
-webkit-animation: leaf-3-grow 1.5s ease-out 1;
}
@-webkit-keyframes leaf-3-grow {
0%,
90% {
width: 0;
height: 0;
bottom: 30%;
left: 55%;
opacity: 0;
}
100% {
width: 8%;
height: 15%;
bottom: 20%;
left: 43%;
}
}
@keyframes leaf-3-grow {
0%,
90% {
width: 0;
height: 0;
bottom: 30%;
left: 55%;
opacity: 0;
}
100% {
width: 8%;
height: 15%;
bottom: 20%;
left: 43%;
}
}
.FBB-leaf-3::after {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 0 50px 0 0;
bottom: 15%;
right: 7%;
width: 50%;
height: 60%;
border-right: 3px solid #fff;
}
.FBB-leaf-3::before {
content: "";
position: absolute;
border: 0 solid transparent;
border-radius: 50px;
bottom: -40%;
right: 40%;
width: 70%;
height: 130%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
border-top: 3px solid #333;
}
/***** MEDIA QUERIES ******/
@media only screen and (max-width: 700px) {
.FBB-frame-top,
.FBB-frame-bottom {
width: 450px;
height: 113px;
}
.FBB-main-leaf {
border-left-width: 3px;
border-top-width: 3px;
}
.FBB-main-bottom {
border-bottom-width: 4px;
border-right-width: 4px;
}
.FBB-swirl-first-1 {
border-right-width: 4px;
}
.FBB-swirl-first-2 {
border-right-width: 3px;
}
.FBB-swirl-last {
border-top-width: 3px;
border-right-width: 4px;
}
.FBB-leaf-1::before,
.FBB-leaf-2a::before {
border-left-width: 2px;
}
.FBB-leaf-2c::before,
.FBB-leaf-3::before,
.FBB-leaf-2b::before {
border-top-width: 2px;
}
}
@media only screen and (max-width: 500px) {
.FBB-frame-top,
.FBB-frame-bottom {
width: 300px;
height: 75px;
}
.FBB-main-leaf {
border-left-width: 2px;
border-top-width: 2px;
}
.FBB-left::after,
.FBB-right::after {
height: 3px;
}
.FBB-main-bottom {
border-bottom-width: 3px;
border-right-width: 3px;
}
.FBB-main-bottom::after {
border-bottom-width: 2px;
}
.FBB-swirl-first-1,
.FBB-swirl-first-2 {
border-right-width: 2px;
}
.FBB-swirl-last {
border-top-width: 2px;
border-right-width: 3px;
}
.FBB-swirl-last::before {
border-top-width: 2px;
border-left-width: 2px;
}
.FBB-swirl-last::after {
border-bottom-width: 1px;
}
.FBB-leaf-1::after {
border-right-width: 2px;
}
.FBB-leaf-2b::after {
border-right-width: 2px;
}
.FBB-leaf-2c::after {
border-right-width: 2px;
}
.FBB-leaf-2c::before,
.FBB-leaf-3::before,
.FBB-leaf-2b::before {
border-top-width: 1px;
}
}
@media only screen and (max-width: 400px) {
.FBB-frame-top,
.FBB-frame-bottom {
width: 200px;
height: 50px;
}
}
</style>
FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-65676263247427340112016-12-19T05:30:00.001-08:002022-12-06T05:30:54.908-08:00Xmas Tree<div class="separator" style="display:none;"><img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEiQWlQYWxVTNqRwn6XvDCfiXqVbOzYke7m5RwH1O2TX-9daHRhZ5omO09XtyCBYdSDR8O_oeHLJvrExlaYg0H6BL2lF-YdxX07l_xncZmfQsNftVBVvUap81y8Mps8uFK-TPIXlc_gqiGpy5syFX9tL6X5Tj2T7xx48y-wQUxeIA4JgrWHHq0QBydTE"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:none;">
<div id="main-tree-wrap">
<div class="tree-wrap">
<div class="star">
<div class="star-inner"></div>
</div>
<ul class="tree top">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree middle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="tree bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="lightrope">
<li style="top:40.8%; left:36%;"></li>
<li style="top:41.3%; left:42%;"></li>
<li style="top:40.6%; left:48%;"></li>
<li style="top:38.5%; left:54%;"></li>
<li style="top:55.5%; left:28%;"></li>
<li style="top:56%; left:34%;"></li>
<li style="top:56.2%; left:40%;"></li>
<li style="top:55.5%; left:46%;"></li>
<li style="top:53.9%; left:52%;"></li>
<li style="top:51.3%; left:58%;"></li>
<li style="top:49.1%; left:62%;"></li>
<li style="top:72%; left:24%;"></li>
<li style="top:72.6%; left:30%;"></li>
<li style="top:72.8%; left:36%;"></li>
<li style="top:72.7%; left:42%;"></li>
<li style="top:72%; left:48%;"></li>
<li style="top:70.8%; left:54%;"></li>
<li style="top:68.8%; left:60%;"></li>
<li style="top:65.2%; left:66%;"></li>
</ul>
</div>
<div class="ground"></div>
<div class="snow"></div>
<div class="snow2"></div>
</div>
</div>
<style>
#main-tree-wrap {
background-color:#6ab4e3;
max-width:600px;
height:600px;
border:5px solid #ddd;
border-bottom:none;
border-radius:100%;
margin: 25px auto;
padding: 0;
position: relative;
overflow: hidden;
}
#main-tree-wrap ul {
padding: 0;
margin: 0;
}
#main-tree-wrap::before {
content: '';
width:550px;
height: 160px;
border-radius: 10px 100% 50px 30px;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
bottom:0px;
left:0;
box-shadow: inset -5px 10px 10px -5px #cbd7e6, inset -15px 5px 25px 0px #b3c5da, inset -30px 30px 60px 10px #d7dce2, inset -10px 25px 22px 10px #f5efe7
}
.ground::after {
content: '';
width:400px;
height: 130px;
border-radius: 100% 50% 10px 30px;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
bottom:-15px;
left:calc(50% - 210px);
box-shadow: inset -5px 10px 10px #cbd7e6, inset -10px 20px 25px 10px #d7dce2,
130px 35px 30px -30px #fff, 145px 20px 20px -20px #f5efe7, 150px 20px 0 -15px #b3c5da, 150px 20px 10px -16px #fff,
-130px -5px 30px -10px #fff, -150px -20px 0 -10px #b3c5da
}
.tree-wrap {
position: relative;
width:100%;
height: 366px;
margin-top: 125px;
}
.tree-wrap::after {
content: '';
width: 50px;
height: 40px;
padding: 0;
margin: 0;
background: #611919;
position: absolute;
bottom:0;
left:calc(50% - 25px);
box-shadow: inset -10px 10px 22px 2px black, inset 10px -10px 15px 0 #a56f20
}
.star {
margin: 0;
position: absolute;
display: block;
color: yellow;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.25);
top:-10px;
left:calc(50% - 100px);
}
.star:before {
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
.star .star-inner {
z-index: 1;
position: absolute;
border-right: 100px solid transparent;
border-bottom: 70px solid #ffa500;
border-left: 100px solid transparent;
transform: rotate(0deg) scale(.5);
top:0;
left:calc(50% - 100px);
}
.star .star-inner:before {
border-bottom: 80px solid #ffa500;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star .star-inner:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #ffa500;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
.tree {
margin: 0;
padding: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #174821;
position: absolute;
left: calc(50% - 100px);
list-style: none;
}
.top {
transform: rotateY(30deg);
transform-origin: center;
top: 35px;
z-index: 3;
}
.middle {
transform: rotateY(30deg) scale(1.4);
transform-origin: center;
top: 100px;
z-index: 2;
}
.bottom {
transform: rotateY(30deg) scale(2);
transform-origin: center;
top: 180px;
z-index: 1;
}
.tree li {
margin: 0;
padding: 0;
width: 0;
height: 0;
position: absolute;
top: 0px;
}
.tree li:first-child {
border-left: 100px solid transparent;
border-right: 0px solid transparent;
border-bottom: 100px solid #1f781d;
transform: rotateY(40deg) rotateZ(-5deg);
transform-origin: top right;
left: calc(50% - 100px);
}
.tree li:nth-child(2) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #1b612b;
transform: rotateY(-50deg) rotateZ(5deg);
transform-origin: bottom left;
}
.tree li:nth-child(3) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #559c5a;
transform: rotateY(253deg) rotateZ(7deg);
transform-origin: bottom left;
}
.tree li:nth-child(4) {
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #1f781d;
transform: rotateY(-75deg) rotateZ(9deg);
transform-origin: bottom left;
}
.lightrope {
margin: 0;
padding: 0;
position: absolute;
z-index: 9;
top: -65px;
right: calc(50% - 250px);
width: 500px;
height: 500px;
}
.lightrope li {
position: absolute;
z-index:10;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
list-style: none;
margin: 0;
padding: 0;
top:0;
display: block;
width: 2%;
height: 3%;
border-radius: 50%;
background: #00f7a5;
box-shadow: 0px 4.66667px 24px 3px #00f7a5;
-webkit-animation-name: flash-1;
animation-name: flash-1;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
-webkit-animation-name: flash-2;
animation-name: flash-2;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px rgba(253, 2, 153, 1);
-webkit-animation-name: flash-3;
animation-name: flash-3;
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
}
.lightrope li:before {
content: "";
position: absolute;
background: #222;
width: 100%;
height: 40%;
border-radius: 3px;
top: -2px;
left: 0px;
}
@-webkit-keyframes flash-1 {
0%, 100% {
background: #eaea18;
box-shadow: 0px 4.66667px 24px 3px #eaea18;
}
50% {
background: rgba(234, 234, 24, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
}
}
@keyframes flash-1 {
0%, 100% {
background: #eaea18;
box-shadow: 0px 4.66667px 24px 3px #eaea18;
}
50% {
background: rgba(234, 234, 24, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
}
}
@-webkit-keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.66667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@-webkit-keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px pink;
}
50% {
background: rgba(253, 2, 153, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
}
}
@keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.66667px 24px 3px pink;
}
50% {
background: rgba(253, 2, 153, 0.4);
box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
}
}
/**/
.snow {
background: white;
border-radius:100%;
left: 50%;
position: absolute;
top: 0;
width: 5px;
height: 5px;
z-index:99;
box-shadow: 0 0px 2px 0px #fff,
10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff, 100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff, -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff, -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff, -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff, -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff, -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff, 70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff, 140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff, 160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff, 180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff, 250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff, -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff, -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff, -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
.snow::after {
content: '';
background: white;
border-radius:100%;
left: 100px;
position: absolute;
top: -200px;
width: 5px;
height: 5px;
z-index:99;
box-shadow: 0 0px 2px 0px #fff,
10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff, 100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff, -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff, -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff, -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff, -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff, -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff, 70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff, 140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff, 160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff, 180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff, 250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff, -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff, -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff, -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}
.snow::before {
content: '';
background: white;
border-radius:100%;
left: -200px;
position: absolute;
top: -300px;
width: 5px;
height: 5px;
z-index:99;
box-shadow: 0 0px 2px 0px #fff,
10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff, 100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff, -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff, -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff, -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff, -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff, -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff, 70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff, 140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff, 160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff, 180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff, 250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff, -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff, -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff, -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}
@keyframes snow {
0% {transform: translate(0, 0); opacity: 0.15}
20% {transform: translate(-20px, 100px); opacity: 1}
70% {transform: translate(-70px, 250px); opacity: .7}
100% {transform: translate(-100px, 300px); opacity: 0.1}
}
@-moz-keyframes snow {
0% {transform: translate(0, 0); opacity: 0.15}
20% {transform: translate(-20px, 100px); opacity: 1}
70% {transform: translate(-70px, 250px); opacity: .7}
100% {transform: translate(-100px, 300px); opacity: 0.1}
}
@-webkit-keyframes snow {
0% {transform: translate(0, 0); opacity: 0.15}
20% {transform: translate(-20px, 100px); opacity: 1}
70% {transform: translate(-70px, 250px); opacity: .7}
100% {transform: translate(-100px, 300px); opacity: 0.1}
}
@-ms-keyframes snow {
0% {transform: translate(0, 0); opacity: 0.15}
20% {transform: translate(-20px, 100px); opacity: 1}
70% {transform: translate(-70px, 250px); opacity: .7}
100% {transform: translate(-100px, 300px); opacity: 0.1}
}
.snow2{
content: '';
position: absolute;
top:-100px;
left:50%;
border-radius: 50%;
width: 8px;
height: 8px;
background: #fff;
opacity: 0.8;
-webkit-animation: slowSnow 40s linear infinite;
-moz-animation: slowSnow 40s linear infinite;
-ms-animation: slowSnow 40s linear infinite;
animation: slowSnow 40s linear infinite;
box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff, 80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff, -100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff, -150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff, -190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff, -270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff, -200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff, 180px 380px 4px 1px #fff
}
.snow2::before {
content: '';
position: absolute;
top:-500px;
left:50%;
border-radius: 50%;
width: 8px;
height: 8px;
background: #fff;
opacity: 0.8;
-webkit-animation: slowSnow 30s linear infinite;
-moz-animation: slowSnow 30s linear infinite;
-ms-animation: slowSnow 30s linear infinite;
animation: slowSnow 30s linear infinite;
box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff, 80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff, -100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff, -150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff, -190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff, -270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff, -200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff, 180px 380px 4px 1px #fff
}
/* slowSlow */
@keyframes slowSnow {
0% {transform: translate(0, 0);}
20% {transform: translate(-20px, 100px); }
70% {transform: translate(0px, 250px); }
100% {transform: translate(10px, 300px); }
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-52092901121941176922016-09-02T06:25:00.004-07:002022-12-06T05:28:32.971-08:00Steampunk Monitors<div class="separator" style="display:none"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjfUh7rOlaRIbGFr3Y7iadHuJLaUt5_sT3ZDLwMrKEML9Pg3saDgrR-VXQyFb7eyjB8vo2_jo0ODCh6BIVIljtfm2-rG1AGmXNY0m176fBtnHXWULDDoA_Qexc834myN1gPn2JBfQA-N8HdlMg9dUYBsHcdvDWk845WxLU74Ulj1J4a8ttCotBPqN4s"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:none;">
<div id="screens-wrapper">
<div class="screens">
<div id="screen1">
<video autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQZAcap4b5g8LrtZSZ2lLXB3gBLL9Z9xW5sXItM9QmkVHPGBsLzrjRXviKc6AbrgIlv4DNtLybdOzQrx4zkmFE841PxxvwD0HRHkeI_fQQSq7DGVi4wqVtGL9CxttK5fKq1SgeJevGMWA/s1600/3bg.jpg">
<source src="https://dl.dropboxusercontent.com/s/hxzhoqsw9nk4xkx/FlyBirdsBox-screen-3s.mov" autoplay="autoplay" loop="loop" muted="muted" type="video/mp4"/>
</video>
<br />
<div class="screen">
<ul class="s1-lights">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="screen2">
<video autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pNp5vNqVJEAeAUUISBKjVFMgt30iIQ33YIYn2amxjK5U66h9sYzSyMF29Yxm-7kQPrZKZzNhfspNPLuAut-RJy1B6ZKKhdsBhuArt4hH6dB_8ZarhEQwsnephZyIZl4jE8tLdW46oyI/s1600/2bg.jpg">
<source src="https://dl.dropboxusercontent.com/s/4f2lqe6xql18c5g/FlyBirdsBox-screen-2s.m4v" autoplay="autoplay" loop="loop" muted="muted" type="video/mp4"/>
</video>
<br />
<div class="screen">
</div>
</div>
<div id="screen3">
<video autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQTRnJAuMweTSmoDFx0Oyil6GxAr6f8f5RmI0vb7avEPSNCym1e93xNilVdw5canqsp7WmnSVYsWRj0B-kB47va-mJB7mQBxVMotQNClu9aTq9l6c9nk7qgeHLCOB11w2Ury8mEJP8K4/s1600/1bg.jpg">
<source src="https://dl.dropboxusercontent.com/s/moevwfp7gkl72ai/FlyBirdsBox-screen-1s.mov" autoplay="autoplay" loop="loop" muted="muted" type="video/mp4"/>
</video>
<br />
<div class="screen">
<ul class="s3-lights">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
/********************/
#screens-wrapper {
margin:5% auto;
padding: 25px 0 0 0;
max-width:100%;
width:300px;
height: 700px;
position: relative;
z-index: 1;
}
@media only screen and (max-width: 376px) {
#screens-wrapper {overflow: hidden;}
}
.screens::before {
content:'';
display:block;
height:300px;
width:300px;
margin:0 auto;
background:rgb(255 255 255 / 66%);
position:absolute;
border-radius:100%;
z-index:-2;
top:70px;
border:1px solid #ececec;
}
/* #screen1 - smallest */
#screen1 {
width:200px;
height:139px;
position:relative;
}
#screen1::before, #screen1::after {
content:'';
display:block;
width:50px;
height:240px;
right:100px;
top:100px;
position:absolute;
z-index: -1;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVKvoNpen0Nsz8-mN2SHmqlx2siIgkg-s7Kj1WYsy4QrYiPm6DYW994npWrX5iCfS1NyHAP9j5h8YDFjVfseWRokdcmIjAvmrYID2dLf6xwoKyKGGAGypNb3-MxTaGUZQRVaWY8iLyCQ/s1600/FlyBirdsBox-website_design-pipe-3.png) no-repeat;
background-size: contain;
}
#screen1::after {right:20px;}
#screen1 .screen {
width:200px;
height:139px;
position:absolute;
z-index: 1;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi53kw4AIk5dGzMTEkuDbvRQpzO1PVNnS6MD-u8j_oMdCtmMkeju19Y5KNT-Eo6fr_j1O_Yuc-mZaadp0XKgQ2_kf41_kYOHRJt7VOswrJHKGAMJIsSsATCIjpxZJwfgSQa15AJ8coqz0/s1600/FlyBirdsBox-website_design-screen-3bs.png) no-repeat;
background-size: contain;
}
#screen1 video {
width:150px;
height:120px;
position:absolute;
z-index: 0;
top:35px;
left:30px
}
/* #screen1 - smallest - lights */
#screen1 .s1-lights {
position: absolute;
top: 54px;
left: -8px;
}
.s1-lights li {
display:block;
width:5px;
height: 5px;
background:#000;
margin: 8px 0;
border-radius:1px;
-webkit-animation: s1-lights 2s steps(3) 0s infinite;
-moz-animation: s1-lights 2s steps(3) 0s infinite;
-o-animation: s1-lights 2s steps(3) 0s infinite;
animation: s1-lights 2s steps(3) 0s infinite;
}
@-webkit-keyframes s1-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@-moz-keyframes s1-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@-o-keyframes s1-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@keyframes s1-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
.s1-lights li:nth-child(2) {
animation-delay: 1s;
}
.s1-lights li:nth-child(3) {
animation-delay: 2s;
}
/* #screen2 - smallest */
#screen2 {
width:200px;
height:168px;
top:-25px;
right:-80px;
position:relative;
}
#screen2 .screen {
width:200px;
height:168px;
position:absolute;
z-index: 2;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoe5GStsLUtwz6zl-NLuFtge7tu4Fvl_rhUfjl2mkortJhnSUpcFxMqRn81uxsDUaapJUP_r2kWYzhQ1YoBcoLDtkTwivzmUvoEEKHnVLvY8TOb2fkN7zAaa9_xDTdB_bSuWYmBXkzpGM/s1600/FlyBirdsBox-website_design-screen-2bs.png) no-repeat;
background-size: contain;
}
#screen2 video {
width:180px;
height:100px;
top:50px;
left:10px;
position:absolute;
z-index: 1;
}
/* #screen3 - smallest */
#screen3 {
width:320px;
height:285px;
top:-80px;
right:12px;
position:relative;
}
#screen3::before, #screen3::after {
content:'';
display:block;
width:50px;
height:450px;
left:145px;
top:220px;
position:absolute;
z-index: -2;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix9x7haAbvaXhbVCQ39kqiJPV0RALg3E15NVYR25gmQcPF96RLCgRWj4uVmqNnTYnllwWssiDP7EXBhgEDf7vR8MpcmJIUY7vasKysHeTKaYSMk4E28UgEV7Yw8eFb_VZZNXMa9o_9GFQ/s1600/FlyBirdsBox-website_design-pipe-3b.png) no-repeat;
background-size: contain;
}
#screen3::after {
left:90px;
height:400px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1DRK2utVg6PaeRRcjxJ0pRIbASSibbmI_AGKM-pHMwt8pEz781d5ztrosVua1qNLzVdBKOOl2HBKfj9LM6zgKy0aT4UlH2cNdYsXJPJuScPOC8jxe_Ili8_Dt9R6y3zxgg4hF9O2lqfs/s1600/FlyBirdsBox-website_design-pipe-3c.png) no-repeat;
background-size: contain;
}
#screen3 .screen {
width:320px;
height:285px;
position:absolute;
z-index: 3;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAgkcYxtJp6ms0MohMeTjmYee3C1n_sZB7GNZAjvd5AxXVznhBs3a-Spg27PksL6h1f5fQf8t8uUYi__lFPYr1QwD2_KGtCFi3GNJzvsxGxC0lNvUa_RBzBAfjKhiw8PM5OtjYH_DV0mQ/s1600/FlyBirdsBox-website_design-screen-1bs2.png) no-repeat;
background-size: contain;
}
#screen3 .screen::before {
content:'';
display:block;
width:67px;
height:73px;
left:46px;
top:0;
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjniS7dmZctO2BGl0elIcOVTNBfloEBfK3vH821idQjgXx_gBxaV0IA3PpzdKQIVRVTIqgZ33W6YKKGW8OClqLiS7hIZJVvIKhFV1k2x-kQK775KopwXBie3zEZElBxh5eGDHhvzRZfSU/s1600/FlyBirdsBox-website_design-screen-1-antena2.png) no-repeat;
background-size: contain;
-webkit-animation: antena 5s linear 2s infinite alternate;
-moz-animation: antena 5s linear 2s infinite alternate;
-o-animation: antena 5s linear 2s infinite alternate;
animation: antena 5s linear 2s infinite alternate;
}
@-webkit-keyframes antena {
0% {}
100% {-webkit-transform: rotate(30deg) translate(8px,-13px);}
}
@-moz-keyframes antena {
0% {}
100% {-moz-transform: rotate(30deg) translate(8px,-13px);}
}
@-o-keyframes antena {
0% {}
100% {-o-transform: rotate(30deg) translate(8px,-13px);}
}
@keyframes antena {
0% {}
100% {transform: rotate(30deg) translate(8px,-13px);}
}
#screen3 video {
width:180px;
height:120px;
top:110px;
left:55px;
position:absolute;
z-index: 2;
}
/* #screen3 - smallest - lights */
#screen3 .screen .s3-lights {
position: absolute;
right: 60px;
top: 65px;
}
.s3-lights li {
display:inline-block;
height: 10px;
width:5px;
background:#000;
border-radius:1px;
-webkit-animation: s3-lights 3s steps(2) 1s infinite;
-moz-animation: s3-lights 3s steps(2) 1s infinite;
-o-animation: s3-lights 3s steps(2) 1s infinite;
animation: s3-lights 3s steps(2) 1s infinite;
}
@-webkit-keyframes s3-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@-moz-keyframes s3-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@-o-keyframes s3-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
@keyframes s3-lights {
0% {opacity:0;}
100% {opacity:90%;}
}
.s3-lights li:nth-child(2) {
background: #000;
animation-delay: 2s;
}
.s3-lights li:nth-child(3) {
animation-delay: 3s;
}
.s3-lights li:nth-child(4) {
background: #000;
animation-delay: 4s;
}
.s3-lights li:nth-child(5) {
animation-delay: 5s;
}
/* min-width: 576px
*********************/
@media only screen and (min-width: 576px) {
#screens-wrapper {
width:500px;
height:800px;
}
.screens::before {
height:450px;
width:450px;
top:20px;
}
/* #screen1 - 576px */
#screen1, #screen1 .screen {
width:250px;
height:173px;
right:0;
margin-left:80px
}
#screen1::before, #screen1::after {
width:50px;
height:240px;
left:150px;
top:100px;
}
#screen1::after {left:100px;}
#screen1 video {
width:180px;
height:130px;
left:40px
}
#screen1 .s1-lights {
top: 73px;
left: 2px;
}
.s1-lights li {
margin: 10px 0;
}
/* #screen2 - 576px */
#screen2 {
width:250px;
height:210px;
left:220px;
top: -35px;
}
#screen2 .screen {
width:250px;
height:210px;
}
#screen2 video {
width:200px;
height:150px;
top: 47px;
left: 20px;
}
/* #screen3 - 576px */
#screen3 {
width:400px;
height:356px;
top:-170px;
}
#screen3::before, #screen3::after {
width:70px;
height:550px;
left:180px;
top:265px;
}
#screen3::after {
left:100px;
height:500px;
}
#screen3 .screen {
width:400px;
height:356px;
}
#screen3 .screen::before {
width:84px;
height:92px;
left:58px;
}
@-webkit-keyframes antena {
0% {}
100% {-webkit-transform: rotate(30deg) translate(8px,-18px);}
}
@-moz-keyframes antena {
0% {}
100% {-moz-transform: rotate(30deg) translate(8px,-18px);}
}
@-o-keyframes antena {
0% {}
100% {-o-transform: rotate(30deg) translate(8px,-18px);}
}
@keyframes antena {
0% {}
100% {transform: rotate(30deg) translate(8px,-18px);}
}
#screen3 video {
width:250px;
height:160px;
top:130px;
}
#screen3 .screen .s3-lights {
right: 83px;
top: 85px;
}
.s3-lights li {
height: 14px;
width:5px;
}
.s3-lights li:nth-child(2) {
margin-right:5px;
}
.s3-lights li:nth-child(3) {
margin-right:3px;
}
.s3-lights li:nth-child(4) {
margin-right:3px;
}
}
/* min-width: 768px
*********************/
@media only screen and (min-width: 768px) {
#screens-wrapper {
width:600px;
height: 1000px;
}
.screens::before {
height:550px;
width:550px;
top:10px;
}
/* #screen1 - 768px */
#screen1, #screen1 .screen {
width:289px;
height:200px;
margin-left:150px
}
#screen1::before, #screen1::after {
width:100px;
height:240px;
left:170px;
top:160px;
}
#screen1::after {left:110px;}
#screen1 video {
width: 200px;
height: 160px;
left: 50px;
top: 50px;
}
#screen1 .s1-lights {
top: 86px;
left: 7px;
}
.s1-lights li {
width:7px;
height: 7px;
}
/* #screen2 - 768px */
#screen2 {
width:300px;
height:253px;
left:290px;
}
#screen2 .screen {
width:300px;
height:253px;
}
#screen2 video {
width: 250px;
height: 200px;
top: 40px;
left: 20px;
}
/* #screen3 - 768px */
#screen3 {
width:450x;
height:445px;
top:-220px;
right:-75px;
}
#screen3::before, #screen3::after {
width:130px;
height:680px;
top:280px;
}
#screen3::after {
height:600px;
}
#screen3 .screen {
width:450px;
height:400px;
}
#screen3 .screen::before {
width:95px;
height:104px;
left:65px;
}
@-webkit-keyframes antena {
0% {}
100% {-webkit-transform: rotate(30deg) translate(12px,-18px);}
}
@-moz-keyframes antena {
0% {}
100% {-moz-transform: rotate(30deg) translate(12px,-18px);}
}
@-o-keyframes antena {
0% {}
100% {-o-transform: rotate(30deg) translate(12px,-18px);}
}
@keyframes antena {
0% {}
100% {transform: rotate(30deg) translate(12px,-18px);}
}
#screen3 video {
width: 300px;
height: 200px;
top: 135px;
}
#screen3 .screen .s3-lights {
right: 100px;
top: 100px;
}
.s3-lights li:nth-child(2) {
margin-right:6px;
margin-left: 3px;
}
.s3-lights li:nth-child(3) {
margin-right:5px;
}
.s3-lights li:nth-child(4) {
margin-right:5px;
}
}
/* min-width: 992px
*********************/
@media only screen and (min-width: 992px) {
#screens-wrapper {
width:700px;
height: 1100px;
}
.screens::before {
height:600px;
width:600px;
top:30px;
}
/* #screen1 - 992px */
#screen1, #screen1 .screen {
width:322px;
height:223px;
margin-left:130px
}
#screen1::before, #screen1::after {
width:100px;
height:280px;
left:175px;
}
#screen1::after {left:120px;}
#screen1 video {
width:215px;
height:150px;
left:40px
}
#screen1 .s1-lights {
top: 97px;
left: 11px;
}
.s1-lights li {
width:9px;
height: 9px;
}
/* #screen2 - 992px */
#screen2, #screen2 .screen {
width:335px;
height:282px;
}
#screen2 {
top: -95px;
left:330px;
}
#screen2 video {
width: 270px;
height: 200px;
top: 60px;
left: 30px;
}
/* #screen3 - 992px */
#screen3, #screen3 .screen {
width:541px;
height:482px;
}
#screen3 {
top: -290px;
right: -85px;
}
#screen3 .screen::before {
width:114px;
height:125px;
left:79px;
}
@-webkit-keyframes antena {
0% {}
100% {-webkit-transform: rotate(30deg) translate(10px,-22px);}
}
@-moz-keyframes antena {
0% {}
100% {-moz-transform: rotate(30deg) translate(10px,-22px);}
}
@-o-keyframes antena {
0% {}
100% {-o-transform: rotate(30deg) translate(10px,-22px);}
}
@keyframes antena {
0% {}
100% {transform: rotate(30deg) translate(10px,-22px);}
}
#screen3::before, #screen3::after {
width:130px;
height:800px;
left:150px;
top:350px;
}
#screen3::after {
left:245px;
height:730px;
}
#screen3 video {
width: 350px;
height: 300px;
top: 125px;
left: 55px;
}
#screen3 .screen .s3-lights {
right: 130px;
top: 122px;
}
.s3-lights li {
height: 14px;
width:6px;
}
.s3-lights li:nth-child(2) {
margin-right:7px;
margin-left: 4px;
}
.s3-lights li:nth-child(3) {
margin-right:7px;
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-57298571371834926412016-04-27T05:46:00.003-07:002022-12-06T04:47:38.933-08:003D Text<div class="separator" style="display:none;"><img alt="" border="0" data-original-height="1362" data-original-width="2268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUB6yNPqWZYkHr5QyKXJFV-Ba46pFAGBX8Pfr2YDFCUCBSfkVfBehNSKsHH4_Md-LHkVKThM_oOZj2rXQJPwJDebxCfpecnG_qG72rJCU6_Q6VKIJQw8FKLhcwMafwnZawEGDtDSD2sDV1_T1AZ3_zj0uoCVynrZoeu-5f00I7JYG1aZU1dvLgYx2A/s1600/3DText-FlyBirdsBox.png"/></div>
<span><a name='more'></a></span>
<div class="static-border" style="background:#f1f1f1">
<div class="v-wrap">
<div class="v-box">
<div class="logo fadeIn" >
<div id="fly">
⫓⫔⫓⫔⫓⫔⫓⫔⫓⫔⫓⫔
</div>
<div id="box">
∘∘∘ B o x ∘∘∘
</div>
<div id="bird" >
⫓⫔⫓⫔⫓⫔⫓⫔⫓⫔⫓⫔
</div>
</div>
<div id="subtitle">
Web savvy designs
</div>
</div>
</div>
</div>
<style>
/* Basic Style/Positioning for all Pages */
/*vertical center */
.v-wrap{
height: 90%;
text-align: center;
white-space: nowrap;
opacity: 1;
background-image: radial-gradient(#c9c9c9 2px, transparent 2px), radial-gradient(#c9c9c9 2px, #f1f1f1 2px);
background-size: 80px 80px;
background-position: 0 0,40px 40px;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
margin-right: -.25em;
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
padding: 2em 1em;
}
/*homepage logo */
.logo {
color: #f1f1f1;
text-align:center;
text-transform:uppercase;
font-size: 12em;
font-size: 11vw;
line-height: 1;
font-weight: bold;
/* font-family: Helvetica;*/
margin: 5% auto;
/*
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
*/
}
#subtitle {
text-align:center;
text-transform:uppercase;
font-size: 2em;
font-size: 2vw;
color: #777;
padding-bottom:20px
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: number|infinite;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0.95);
filter:blur(0px);
opacity: 0.1;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 0px 0 #bbb,
0 0px 0 #b9b9b9,
0 0px 0 #aaa,
0 0px 0px rgba(0,0,0,.1),
0 0 0px rgba(0,0,0,.1),
0 0px 0px rgba(0,0,0,.3),
0 0px 0px rgba(0,0,0,.2),
0 0px 0px rgba(0,0,0,.25),
0 0px 0px rgba(0,0,0,.2),
0 0px 0px rgba(0,0,0,.15);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset;
}
3% {
transform: scale(1);
filter:blur(0px);
opacity: 0.8;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 0px 0 #bbb,
0 1px 0 #b9b9b9,
0 2px 0 #aaa,
0 3px 0px rgba(0,0,0,.01),
0 0 0px rgba(0,0,0,.01),
0 0px 0px rgba(0,0,0,.03),
0 0px 0px rgba(0,0,0,.02),
0 2px 1px rgba(0,0,0,.025),
0 3px 1px rgba(0,0,0,.02),
0 5px 5px rgba(0,0,0,.015);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset;
}
6% {
transform: scale(1);
opacity: 1;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 1px 0 #bbb,
0 2px 0 #b9b9b9,
0 3px 0 #aaa,
0 4px 1px rgba(0,0,0,.01),
0 0 1px rgba(0,0,0,.01),
0 0px 1px rgba(0,0,0,.1),
0 1px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.05),
0 5px 2px rgba(0,0,0,.02),
0 8px 8px rgba(0,0,0,.025);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset ;
}
9% {
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 1px 0 #c9c9c9,
0 2px 0 #bbb,
0 3px 0 #b9b9b9,
0 4px 0 #aaa,
0 5px 1px rgba(0,0,0,.1),
0 0 1px rgba(0,0,0,.1),
0 0px 1px rgba(0,0,0,.1),
0 2px 2px rgba(0,0,0,.1),
0 4px 3px rgba(0,0,0,.1),
0 6px 4px rgba(0,0,0,.05),
0 10px 13px rgba(0,0,0,.05);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset 2px 2px 2px 0px rgba(0,0,0,0.0), inset 2px 2px 20px 5px rgba(0,0,0,0.0);
}
11% {
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 1px 0 #c9c9c9,
0 2px 0 #bbb,
0 3px 0 #b9b9b9,
0 4px 0 #aaa,
0 5px 1px rgba(0,0,0,.1),
0 0 1px rgba(0,0,0,.1),
0 0px 1px rgba(0,0,0,.2),
0 2px 2px rgba(0,0,0,.15),
0 4px 3px rgba(0,0,0,.15),
0 6px 4px rgba(0,0,0,.1),
0 10px 13px rgba(0,0,0,.09);
}
15%, 100% {
transform: scale(1);
opacity: 1;
filter:blur(0px);
color: #f1f1f1;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
filter:blur(0px)
}
/*
100% {
transform: scale(.97);
opacity: 0.7;
filter:blur(5px)
}
*/
}
@-webkit-keyframes fadeIn {
0% {
transform: scale(0.95);
filter:blur(0px);
opacity: 0.1;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 0px 0 #bbb,
0 0px 0 #b9b9b9,
0 0px 0 #aaa,
0 0px 0px rgba(0,0,0,.1),
0 0 0px rgba(0,0,0,.1),
0 0px 0px rgba(0,0,0,.3),
0 0px 0px rgba(0,0,0,.2),
0 0px 0px rgba(0,0,0,.25),
0 0px 0px rgba(0,0,0,.2),
0 0px 0px rgba(0,0,0,.15);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset;
}
3% {
transform: scale(1);
filter:blur(0px);
opacity: 0.8;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 0px 0 #bbb,
0 1px 0 #b9b9b9,
0 2px 0 #aaa,
0 3px 0px rgba(0,0,0,.01),
0 0 0px rgba(0,0,0,.01),
0 0px 0px rgba(0,0,0,.03),
0 0px 0px rgba(0,0,0,.02),
0 2px 1px rgba(0,0,0,.025),
0 3px 1px rgba(0,0,0,.02),
0 5px 5px rgba(0,0,0,.015);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset;
}
6% {
transform: scale(1);
opacity: 1;
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 0px 0 #c9c9c9,
0 1px 0 #bbb,
0 2px 0 #b9b9b9,
0 3px 0 #aaa,
0 4px 1px rgba(0,0,0,.01),
0 0 1px rgba(0,0,0,.01),
0 0px 1px rgba(0,0,0,.1),
0 1px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.05),
0 5px 2px rgba(0,0,0,.02),
0 8px 8px rgba(0,0,0,.025);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset ;
}
9% {
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 1px 0 #c9c9c9,
0 2px 0 #bbb,
0 3px 0 #b9b9b9,
0 4px 0 #aaa,
0 5px 1px rgba(0,0,0,.1),
0 0 1px rgba(0,0,0,.1),
0 0px 1px rgba(0,0,0,.1),
0 2px 2px rgba(0,0,0,.1),
0 4px 3px rgba(0,0,0,.1),
0 6px 4px rgba(0,0,0,.05),
0 10px 13px rgba(0,0,0,.05);
box-shadow:2px 2px 5px 2px rgba(0,0,0,.0),1px 1px 10px 10px rgba(0,0,0,.0), inset 2px 2px 2px 0px rgba(0,0,0,0.0), inset 2px 2px 20px 5px rgba(0,0,0,0.0);
}
11% {
color: #f1f1f1;
text-shadow:
0 0px 0 #ccc,
0 1px 0 #c9c9c9,
0 2px 0 #bbb,
0 3px 0 #b9b9b9,
0 4px 0 #aaa,
0 5px 1px rgba(0,0,0,.1),
0 0 1px rgba(0,0,0,.1),
0 0px 1px rgba(0,0,0,.2),
0 2px 2px rgba(0,0,0,.15),
0 4px 3px rgba(0,0,0,.15),
0 6px 4px rgba(0,0,0,.1),
0 10px 13px rgba(0,0,0,.09);
}
15%, 100% {
transform: scale(1);
opacity: 1;
filter:blur(0px);
color: #f1f1f1;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
filter:blur(0px)
}
/*
100% {
transform: scale(.97);
opacity: 0.7;
filter:blur(5px)
}
*/
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-68442158204386647842015-11-29T04:39:00.008-08:002022-12-06T13:02:17.985-08:00Lookbook<div class="separator" style="display:none;"><img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEghmg_tsSXrElNB1wqTyGNH18hS8HnSS5egSwCKao1NhzSSJ0di2Cmmw3O9ondpz7Z4totQYVCoeOu-BnrA-9EB5L2IUJZriYaqGxAcdMl3xKpKm5fGpmmece_PPooqPhHD8eI8P2AswPZs9564cRq-QVQJHhZLgV7SfUFiV3h4dOALrJl7UrYgzkoQ"/></div>
<span><a name='more'></a></span>
<div id="lookbook-wrap" class="static-border" style="background:none">
<div id="front">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEgnNv32xmKyB1_FTm4S4fQjsWtgjwispgQYrgiphAb0HbqBPzbCRue5GbWcw14h4bMGxRYLEslrpILhucNFmNg7XN0p8C3ozlMbjJZzKMERfoYvmoxa-NneUEvORz-C9VP_ZxBeVh-F95A0KdPdT-9NXjzYTU_i745J6sq6FMZbiamQlPuSv2WE71UU" /></div>
<div class="parallax">
<div class="parallax__group">
<div class="parallax__layer parallax__layer_1 shade">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEgAgwN8rTyFxb_g5tzujHrT6bUhOwvr8BM8HkA7ZXzoS-6GiQfpW_dwVNvR8m2wDs9PKjy2uqZzcpvKYD6boJ81TJyUPCseXP4jy1l6b_RoD31BrfnVC4HzMal02b8GGHKoDBCA4_mTLeve7vKi5d-RH_AXhR8dSVYF9Tk5I1qpoQqKSWXHbrdE6HUg" />
</div>
<div class="parallax__layer parallax__layer_2 shade">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhM2MyIK3TsvpI30UY4WnoL45bofm45w0ECNMW6O_NO_I0QUWJzMH3CE5k7JeiNErSp8LqmUgycVPVT0l6nm1jcIl2BhJiZr-H-MbApXqKWxYtnZsjcl3_LlBfeIsdnEU126scBy0jArd-pG_Fx9TcjrJrT7ueqy8Kpb6mdQAwr5RECtB4wX0MIdnc7" />
</div>
<div class="parallax__layer parallax__layer_3 shade">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEjVk07X7La4tMrqJbADnNOKxc2dTaOP77rHtbC4Zm4cm9C4Ou1f_eviOF5OMjRd7x-gwk94lGZU6j_vvTesk8aKGUpXZkx8IURx-z6dsIdEIFBGppr31Q6wbDSQ5vzes_ODgcOTeGZQEMn4vJ32vBPX_e1vgrCuJjAPhk8OXGBTzxJosdFLTnwwL-mD" />
</div>
<div class="parallax__layer parallax__layer_4">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEj2tVbs_6TbMhW2iVGcNdOmEKnOyySE6iPGILApMzMBFkw2jtFPGPl3WbwHMp5AtvhRnN7sggnfIfe7Fmw-tcv9rg75NPGKl7yst6ZNFmJY0B3zKd6VcwUmqsyCayuV1avLXBW_na9IoGKFdv3dQVIg_EiHdVJ70FRChQWHc3Ffa64NDRZV5j1gUEfP" />
</div>
<div class="parallax__layer parallax__layer_5">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiFH5IQoT9IOlyykCeK1Rv_7m1k_IxlvUg2_AvZ3gi4RXAY8o87sWByYtM9nZQX4JRFsU70iGiSfyxZmAqC_VSPvZ7SmZQ7tonn-Lp7n6qTCMpHjmbEoOw_vwWa52Ul0u3ocbzT13eIGVpJHNmBZ3P3LB9-qwvepSkd0vZPzlI_4Fdda4n6oOWqXpkC" />
</div>
<div class="parallax__layer parallax__layer_6">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEixNTAKzmGyEVHWoIsryJ0G3XYxBjlfZowHqYxDiVU3_hHXoBEIDuVGLoKxZmwnryvnJC1r8wRLXSWpQ0ZJ0B2AsdERrnE_q2260qUTt6OGtL6aD-eJEHWf0ib0mfOdKWDsuhKBzIXhw5P6Kw6EGc1DwFEFfZTfcvyAJaA2v-UWQSi0KPtZNHAnOFgj" />
</div>
</div>
</div>
</div>
<div style="height:20px"></div>
<style>
#lookbook-wrap {
/*background: #e3e7e7 url(https://blogger.googleusercontent.com/img/a/AVvXsEjETjYPbNCSYzMu6Gl6iZ9RlBS-rE8g6eAO0jhTDx8OGASa_dSw2jRZI5HQmqQLhX2JAH6W4CO0qTyrRhZBWyCMYoEEZKw9dY1iEsNjmLCRPaErbvBBXHTtBQCnYAKqVmUQymsw4L7gE9gfxK-ghzTfyePRYWCXWXJCheLf5x_yl758aSzcFniCc5N1); */
background-size: contain;
background-position:bottom center;
overflow: hidden;
position: relative;
}
#front {
position: absolute;
z-index: 1;
margin-top: 25px;
}
.parallax {
perspective: 1px;
height: 700px;
width: auto;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__group {
position: relative;
height: 100%;
transform-style: preserve-3d;
}
.parallax__img {
width: 100vw!important;
height: 100vh!important;
}
/*
@media only screen and (max-width: 767px) {
.parallax img {
width: auto!important;
min-width: 100vw!important;
max-width: 100vw!important;
height: 100vh!important;
}
}
*/
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer_1 {
transform: translateZ(-1px) scale(2);
z-index: 0;
text-align: right;
margin-top: 250px;
}
.parallax__layer_2 {
transform: translateZ(-2px) scale(4);
z-index: -1;
text-align: right;
margin-top: 500px;
margin-right: 300px;
}
.parallax__layer_3 {
transform: translateZ(-3px) scale(4);
z-index: -2;
text-align: right;
margin-top: 650px;
margin-right: 50px;
}
.parallax__layer_4 {
transform: translateZ(-4px) scale(4);
opacity:0.7;
margin-top: 650px;
z-index: -3;
}
.parallax__layer_5 {
transform: translateZ(-5px) scale(7);
opacity:0.45;
margin-top: 550px;
z-index: -4;
}
.parallax__layer_6 {
transform: translateZ(-7px) scale(12);
opacity:0.2;
margin-top: 350px;
z-index: -5;
}
.shade img::after {
content:'';
display:block;
background: url(https://blogger.googleusercontent.com/img/a/AVvXsEjkwWS855rzP5LX94cXNFnO23lFKX0cebBmmIlwcN4ZwXAcZLxSMHfhSvYuPGQDiuk-CZA38eSzl9n3J24ZpQqgOShjTwklp1WRW09Ce0_iA8-kjtFdmb5MJLTUtAgj43zjhxhgn9I8_fA3NL718mQpgyyXzqKrjyfFeQoXv3tg6o59ns_qWZYyiNc4) no-repeat;
}
</style></div>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-27959618297013210132015-11-20T04:34:00.008-08:002022-12-06T04:36:05.623-08:00Makeup Crush<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg08MsL4bZNH4EUfqHFXH32cHYDpm9K_dSszrm5nJQKK17WRVZ3vnVFT9r18Lti1HEWQihN0N0D9r4t3XsE_hlTAKo_zjD06Nye1yAFZdyW04dQYhNLYM7GH2N-L56WTdzFS7FgzISyt3TWClbZroHYmHNXiTgwYoVYO23jQqTzC8fS8JmwzNimAtHx" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="827" data-original-width="1500" src="https://blogger.googleusercontent.com/img/a/AVvXsEg08MsL4bZNH4EUfqHFXH32cHYDpm9K_dSszrm5nJQKK17WRVZ3vnVFT9r18Lti1HEWQihN0N0D9r4t3XsE_hlTAKo_zjD06Nye1yAFZdyW04dQYhNLYM7GH2N-L56WTdzFS7FgzISyt3TWClbZroHYmHNXiTgwYoVYO23jQqTzC8fS8JmwzNimAtHx"/></a></div>
<span><a name='more'></a></span>
<div id="Makeup" class="static-border">
<input id="txt" type="text" value="MAKEUP CRUSH" />
<canvas id="canvas"></canvas>
<img alt="" border="0" data-original-height="843" data-original-width="1500" src="https://blogger.googleusercontent.com/img/a/AVvXsEjzSJgC0m3h8JFfibfysmEtloasQlvd2nGPwqtBzyzZ8ulkFeJUAfBE5vgwCM4zsrm6ef_Kkf7mlE9h8rJgzWP617bLjXcDA-gDQL3jI7qCv3LNVqkGVKY9fcJBdyE8uZp-FxILYjWI1jW4wgZVBOST9cHb8OpVKOVx5BrQpZvnbNL4mhfmE9Zkc694"/>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');
#Makeup {
width:100%;
margin-bottom: -6px;
padding-top: 6px;
position: relative;
}
#Makeup input{
display:none
}
#Makeup canvas {
position:absolute;
z-index: 1;
width: 100%;
max-height: 100%;
}
</style>
<script>
var canvas = document.querySelector("#canvas"),
input = document.getElementById('txt'),
ctx = canvas.getContext("2d"),
mouse = {
x: 0,
y: 0
}
input.addEventListener("keyup", function(){
input = document.getElementById('txt');
initScene();
});
/*Welcome to change canvas height and width to you use*/
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
w = canvas.width;
h = canvas.height;
ctx.font = "normal 3vw Cinzel Decorative, cursive";
ctx.textAlign = "right";
ctx.fillText(input.value, canvas.width / 2.3, canvas.height / 3.9);
var radius = 1;
var data32 = new Uint32Array(ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer);
var txtArr = [];
// loop through each pixel. We will only store the ones with alpha = 255
for (i = 0; i < data32.length; i++) {
if (data32[i] & 0xff000000) { // check alpha mask
txtArr.push({ // add new ball if a solid pixel
x: (i % w) * radius * 2 + radius, // use position and radius to
y: ((i / w) | 0) * radius * 2 + radius, // pre-calc final position and size
});
}
}
//console.log(alpha);
function Circle(x, y) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.dx = Math.random() - 1;
this.dy = Math.random() - 1;
this.radius = 1;
this.dest = {
x: x,
y: y
};
this.vx = (Math.random() - 0.5) * 20;
this.vy = (Math.random() - 0.5) * 20;
this.accX = 0;
this.accY = 0;
this.friction = Math.random() * 0.05 + 0.94;
}
Circle.prototype.render = function() {
this.accX = (this.dest.x - this.x) / 1000;
this.accY = (this.dest.y - this.y) / 1000;
this.vx += this.accX;
this.vy += this.accY;
this.vx *= this.friction;
this.vy *= this.friction;
this.x += this.vx;
this.y += this.vy;
//var a = 10*Math.random() - 10,
//dx = a , // do something funky
//dy = a ;
ctx.beginPath();
ctx.arc(this.x , this.y , this.radius, 0, Math.PI * 2);
ctx.fillStyle = "#31231f";
ctx.fill();
var a = this.x - mouse.x;
var b = this.y - mouse.y;
var distance = Math.sqrt(a * a + b * b);
if (distance < (radius * 70)) {
this.accX = (this.x - mouse.x) / 100;
this.accY = (this.y - mouse.y) / 100;
this.vx += this.accX;
this.vy += this.accY;
}
//this.update = function(){
//if(this.x + this.radius > canvas.width || this.x - this.radius < 0){
//this.dx = -this.dx;
//}
//if(this.y + this.radius > canvas.height || this.y - this.radius < 0){
// this.dy = -this.dy;
//}
//}
}
function onMouseMove(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
}
function initScene() {
ctx.font = "normal 200% Cinzel Decorative, cursive";
ctx.textAlign = "center";
ctx.fillText(input.value, canvas.width / 4, canvas.height / 3);
var radius = 1;
var data32 = new Uint32Array(ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer);
var txtArr = [];
// loop through each pixel. We will only store the ones with alpha = 255
for (i = 0; i < data32.length; i++) {
if (data32[i] & 0xff000000) { // check alpha mask
txtArr.push({ // add new ball if a solid pixel
x: (i % w) * radius * 2 + radius, // use position and radius to
y: ((i / w) | 0) * radius * 2 + radius, // pre-calc final position and size
});
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "screen";
circleArr = [];
for (var i = 0; i < txtArr.length; i++) {
circleArr.push(new Circle(txtArr[i].x, txtArr[i].y));
}
}
var circleArr = [];
function render(a) {
requestAnimationFrame(render);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < txtArr.length; i++) {
circleArr[i].render();
}
};
txt.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
initScene();
requestAnimationFrame(render);
</script>
FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-60706638367870299752014-10-14T05:29:00.008-07:002022-12-06T04:33:24.268-08:00FlyBird's Flight<div class="separator" style="display:none"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9UkWyrwwwetjlxAzvfhtItOjh196jji8Tk_SnfNZrOyOBVh5Ct50TgR82I3MDCKueXgDWo77AKjJjoL5pzNW9k930ARggfeclvJkPeYNeCKybgTlIteI5GeTC_TcuPVcPsfSacb0r7cPRlUaRaLOKaZTPnoiPZk_KLSxqDa47GPcPODiGE2uw6Lx/s1600/FLYBIRDlogo-animation.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="400" data-original-width="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9UkWyrwwwetjlxAzvfhtItOjh196jji8Tk_SnfNZrOyOBVh5Ct50TgR82I3MDCKueXgDWo77AKjJjoL5pzNW9k930ARggfeclvJkPeYNeCKybgTlIteI5GeTC_TcuPVcPsfSacb0r7cPRlUaRaLOKaZTPnoiPZk_KLSxqDa47GPcPODiGE2uw6Lx/s1600/FLYBIRDlogo-animation.jpg"/></a></div>
<span><a name='more'></a></span>
<div class="static-border" id="" style="text-align: center; padding: 50px 0;">
<img alt="FlyBird animation" style="width:348px" height="400" src="https://dl.dropboxusercontent.com/s/4y72zd8i4wji5bb/FLYBIRDlogo-animation-full-loop.gif" width="348" />
</div>
FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-35203927737574036372014-10-06T05:27:00.001-07:002022-12-06T04:32:20.959-08:00Camera Lens<div class="separator" style="display:none;"><img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEgbTOOMzTgkb7ROaSH8AEQH6M9nTtuf0Oi48psacK-LO1pcXvDtxvaAe6Tzma1VGUFp9XT6H8jcVASUb-eWU4IZjYocle_K6escXl14dBAb-llltOa3PPpM1K5_EJ0SUyy9pNR28NY6kqRCIwVCEKBPy1fwqzYOW4gwaEGwsEhspRPbB9ZX2r9QMm0L"/></div>
<span><a name='more'></a></span>
<div id="camera-wrap" class="static-border" style="position: relative;">
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimkWfhm4sVwWcBb7z4nJ4ywtN3egsyqSNz2mVITsmToxa63uMeELXlZrFR7cp4yNnU1m9LxPO6eT874uJ7aT16DQCbn2MmRvettR7g7qxEi_7zGk34ubdG9Kcx9f-VvPKyj4S6laFRYmd9/s1600/natalia2.jpg" /></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuVGiKVZUkjQdBfB9-fzKFKr-2B598nA9z8bmzGvBlGRE02jHgjRXdezBBTtZlOfViWreO49aV9qK2QVb8fEOVmLMBqdAn9FRcLnVSbFSZqUwEzdJ_3d7SkC9k8D1yS6enkmM_hlRG2pK/s1600/natalia.png" /></li>
<li><img src="https://blogger.googleusercontent.com/img/a/AVvXsEilKiXyWIj7QHm2SE4Fa3vj8-OBioPMWou-qfNTja3UoUNFHdrSF6U4ZGUkvWXmd8ROLYRiPs37foa1OAn1NjX-atnkvPdPDmAicIjoMfu82p6Zl-T5AKmrf0KQL3i1-X1fdhq_N6-BZKqMfuKvtqBr8Jmf8Mu7tES5t-GQ60gMvKzbasdGQiJgvVha" /></li>
<li><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgQwxeM0gO8f9CauGLDGyD47UKWErI4KM_dfKXUIxDhOCF5f3o5kVdC8aaFEiVhnxM8suRbiuPTHOiuRelzXGj6vKIUSeNWkA8aUuNVBvgNRf_M16yn2A1d4AVuPIYlqpZ4GWMzTOhF8o77_Fej2bh_8o0ga5ButpJyJp_91tVWPRG4cob2gRhunoD6" /></li>
<li><img src="https://blogger.googleusercontent.com/img/a/AVvXsEie1tm7OYo2rp8A7SNMvzOmiTCcfx_6NoiZ-qdOwWwbIeSnW0284Ef3h0XKC1LJo3oQMcfyk4Vh7l1lBRPAuJl74TlpQsr1JudZGG9fa-wQaSft_rEtMUQSvs3ljmjRoXJx5ny1AWOo4KY9RIeeHpVJrM5CrhDpObNCaNufRBDA78vZpjOjmHUodp37" /></li>
</ul>
</div>
<div class="dot">
</div>
<div class="overlay">
</div>
<div class="thumb">
</div>
</div>
</div>
<style type='text/css'>
#camera-wrap {
background: url('https://blogger.googleusercontent.com/img/a/AVvXsEheer6xR90OdI2xt9gOqFnZA2v1LeOoxu5qui7UhuJqC1toNVexhmJqARmtHBgtyTZ-fNkrqJVA841NWRw_nP5VIx2gFPQaVHgmJsjbiQbEoONZoiHuiC0PfwE-eHYbnmZhZKSdSJctkF4EZf_lVALMhXmAhUvQvvxlvAt_HLQ3R8jSPz0Ns6228z4f') no-repeat;
height: 800px;
background-size: 1403px 855px;
background-position: center;
}
#camera-wrap img {border: 0;}
/* Tiny Circleslider */
#rotatescroll { height:300px; position:relative; width:300px;top: 205px; left: calc(50% - 165px);}
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMMIAkA8V9NEwSUk38_i2gJbvc_R_uCAN6IMrBrBGqK7quigR2IeOP7k1Qvu2WbsuXiohxoNu69C168o97wBBotAwE7xw76Jy99qQKWT-MRXzudsxs6NnvmxMWbaCbvTxRjPDVseMfkzf/s1600/flybird-kameraframe2b.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:transparent url(https://blogger.googleusercontent.com/img/a/AVvXsEh5hFzTDKpngUyTks6Wj5T_uQI2sVcafmGjpTVI4Ik8SCeVLLTxKF34Nv6xNZzvqa6Iq9zLMPSSLK3gEAip2WWNv7c0pkitxWqlRgpWZmDwxVtSoHXC0BTpwZ4MKUqFLvCScHDlpwy4xOcr_94cuS4NXVZ25OcAAVFQuKM9-KLAL7_rpwWewBXnxysF) no-repeat 50% 50%; background-size: 35%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background: transparent url(https://blogger.googleusercontent.com/img/a/AVvXsEh5hFzTDKpngUyTks6Wj5T_uQI2sVcafmGjpTVI4Ik8SCeVLLTxKF34Nv6xNZzvqa6Iq9zLMPSSLK3gEAip2WWNv7c0pkitxWqlRgpWZmDwxVtSoHXC0BTpwZ4MKUqFLvCScHDlpwy4xOcr_94cuS4NXVZ25OcAAVFQuKM9-KLAL7_rpwWewBXnxysF) no-repeat 0 0; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span {display:none}
/*
#rotatescroll .thumb::before {
content:'';
display:block;
width:5px;
height:5px;
position:absolute;
left: 50px;
bottom: 50px;
}
*/
</style>
<script type='text/javascript'>
/*! Tiny Circleslider - v2.0.8 - 2015-08-08
* http://www.baijs.com/tinycircleslider
*
* Copyright (c) 2015 Maarten Baijs <wieringen@gmail.com>;
* Licensed under the MIT license */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return k(),w.append(x.first().clone()).css("width",B.width*(x.length+1)),g(),r(0),v.move(v.options.start,v.options.interval),v}function g(){G&&(b[0].ontouchstart=u,b[0].ontouchmove=q,b[0].ontouchend=s),y.bind("mousedown",u);var c=function(b){return b.preventDefault(),b.stopImmediatePropagation(),v.stop(),v.move(a(this).attr("data-slide-index")),!1};G&&b.delegate(".dot","touchstart",c),b.delegate(".dot","mousedown",c)}function h(a){E=setTimeout(function(){v.move(v.slideCurrent+1,!0)},a?50:v.options.intervalTime)}function i(a){return a*(Math.PI/180)}function j(a){return 180*a/Math.PI}function k(){var c=document.createDocumentFragment();z.remove(),x.each(function(b,d){var e=null,f=parseInt(a(d).attr("data-degrees"),10)||360*b/v.slidesTotal,g={top:-Math.cos(i(f))*v.options.radius+A.height/2-D.height/2,left:Math.sin(i(f))*v.options.radius+A.width/2-D.width/2};z.length>0&&(e=z.clone(),e.addClass(a(d).attr("data-classname")).css(g),c.appendChild(e[0])),v.dots.push({angle:f,slide:d,dot:e})}),v.dots.sort(function(a,b){return a.angle-b.angle}),a.each(v.dots,function(b,c){a(c.dot).length>0&&a(c.dot).addClass("dot-"+(b+1)).attr("data-slide-index",b).html("<span>"+(b+1)+"</span>")}),b.append(c),z=b.find(".dot")}function l(a,b){var c,d,e;return a>b?(c=a-b,d=-(b+360-a)):(c=a+360-b,d=-(b-a)),e=c<Math.abs(d)?c:d,[e,d,c]}function m(b){var c=9999,d=9999,e=9999,f=0,g=0,h=0;return a.each(v.dots,function(a,i){var j=l(i.angle,b);Math.abs(j[0])<Math.abs(e)&&(e=j[0],h=a),Math.abs(j[1])<Math.abs(c)&&(c=j[1],f=a),Math.abs(j[2])<Math.abs(d)&&(d=j[2],g=a)}),[[h,f,g],[e,c,d]]}function n(a){return 0>a?360+a%-360:a%360}function o(a,b,c){var d=a,e=!1;Math.abs(a)>Math.abs(b)?(d=-b,e=!0):I?requestAnimationFrame(function(){o(d,b+a)}):F=setTimeout(function(){o(d,b+a,.9*c)},c),v.angleCurrent=n(v.angleCurrent-d),r(v.angleCurrent,e)}function p(a){return{x:H?a.targetTouches[0].pageX:a.pageX||a.clientX,y:H?a.targetTouches[0].pageY:a.pageY||a.clientY}}function q(a){var c=b.offset(),d={left:p(a).x-c.left-A.width/2,top:p(a).y-c.top-A.height/2};return v.angleCurrent=n(j(Math.atan2(d.left,-d.top))),I||r(v.angleCurrent),!1}function r(a,c){closestSlidesAndAngles=m(a),closestSlides=closestSlidesAndAngles[0],closestAngles=closestSlidesAndAngles[1],w.css("left",-(closestSlides[1]*B.width+Math.abs(closestAngles[1])*B.width/(Math.abs(closestAngles[1])+Math.abs(closestAngles[2])))),y.css({top:-Math.cos(i(a))*v.options.radius+(A.height/2-C.height/2),left:Math.sin(i(a))*v.options.radius+(A.width/2-C.width/2)}),c&&b.trigger("move",[x[v.slideCurrent],v.slideCurrent])}function s(b){return a(b.target).hasClass("dot")?!1:(v.dragging=!1,b.preventDefault(),a(document).unbind("mousemove mouseup"),y.unbind("mouseup"),v.options.dotsHide&&z.stop(!0,!0).fadeOut("slow"),v.options.dotsSnap&&v.move(m(v.angleCurrent)[0][0]),void 0)}function t(){v.dragging&&(r(v.angleCurrent),requestAnimationFrame(function(){t()}))}function u(b){return b.preventDefault(),H="touchstart"==b.type,v.dragging=!0,a(b.target).hasClass("dot")?!1:(v.stop(),a(document).mousemove(q),a(document).mouseup(s),y.mouseup(s),v.options.dotsHide&&z.stop(!0,!0).fadeIn("slow"),I&&t(),void 0)}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var v=this,w=(b.find(".viewport"),b.find(".overview")),x=w.children(),y=b.find(".thumb"),z=b.find(".dot"),A=(x.find("a"),{width:b.outerWidth(!0),height:b.outerHeight(!0)}),B={width:x.first().outerWidth(!0),height:x.first().outerHeight(!0)},C={width:y.outerWidth(!0),height:y.outerHeight(!0)},D={width:z.outerWidth(),height:z.outerHeight()},E=null,F=null,G="ontouchstart"in window,H=!1,I="requestAnimationFrame"in window;return this.dots=[],this.slideCurrent=0,this.angleCurrent=0,this.slidesTotal=x.length,this.intervalActive=!1,this.start=function(a){return v.options.interval&&(v.intervalActive=!0,h(a)),v},this.stop=function(){return v.intervalActive=!1,clearTimeout(E),v},this.move=function(a){var b=Math.max(0,isNaN(a)?v.slideCurrent:a);b>=v.slidesTotal&&(b=0);var c=v.dots[b]&&v.dots[b].angle,d=l(c,v.angleCurrent)[0],e=d>0?-2:2;return v.slideCurrent=b,o(e,d,50),v.start(),v},f()}var c="tinycircleslider",d={interval:!1,intervalTime:3500,dotsSnap:!1,dotsHide:!0,radius:140,start:0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}});
</script>
<script type='text/javascript'>
$(document).ready(function()
{
$("#rotatescroll").tinycircleslider({
interval : true
, dotsSnap : true
});
});
</script>
FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0tag:blogger.com,1999:blog-3430062488078322418.post-3696129720843466572013-06-06T05:17:00.006-07:002022-12-06T04:32:06.828-08:00Rustic Cabinet<div class="separator" style="display:none;"><img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEhvWczxlBeeP--v0XIFr6YJlNPNoUimaYUumIm84MW-cN_kkCmXlgZbqU0MV6DPbCkzWP1qmWgXBq7aDLsqCJPW_zdUxILNAvdWxy62tE8_GXCXbvFWPK3onax6GsRP6gtZaylKvHQhz6nlzE-abglHh5yyoHFZVJRY2o9mqTsJHIm2pjIdjNzbOz_i"/></div>
<span><a name='more'></a></span>
<div id="Cabinet" class="static-border" style="background: none;">
<div class="frame shade" style="display:none"></div>
<div class="header"></div>
<div class="cabinet-main-wrap">
<div class="pictures">
<div class="picture01">
<div class="video-wrap"><video src="https://dl.dropbox.com/s/q4083oeku22u28f/1.mp4" autoplay="autoplay" loop="loop" muted="muted" />
</div>
</div>
<div class="picture02">
<div class="video-wrap"><video src="https://dl.dropbox.com/s/zxmmwhdes8mioxi/2.mp4" autoplay="autoplay" loop="loop" muted="muted" />
</div>
</div>
</div>
<div class="icons">
<div class="banner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUKF5jeMTrBlhXpCwnpjSLvX6GJtpmm3Ec7P4Sutq2Dd2quPK8TtJFemLGyTSmP2zsS78WT1WrEWtdGFzCanRP7c2p74EnEscf9dpWU5RYGKOblqm9rGSJYSXS3zub1tfcVdc6iliLuUY/s1600/Flybirdsbox-rusticcabinet.png"/></div>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3YzFckFxmWhG3RWQi5KPH-e9FV7Eu5UIvYLiugrb-DqGoBLzTDs6JW6u265C7T7KqPAA3mnfXXwOTWVlbBdp1abVVxmI7sf6xtaiiKhQWCl_f9h5K6gprlNMiGuFzRvtBKMs4emFN90/s1600/FlyBirdwoodenletters-instagram2.png"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwRHmfGcBxJCm3-7sBUFV8aNDQhnPzo9mu9Ed7BNGzZ_iUrco4Y7D_MRA1DwgMgZ5vfbjXNtYlapHm_n1u9e3r9_y1ORFcgLHecsalsodqbjlsYp3pUcYweCYxomQyLx-Mb2-O4SsoS4/s1600/FlyBirdwoodenletters-googleplus2.png"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRE0KwiXGW1aJ3Bi60jCl5eSdb2rOPYd33X2PI_oYVML3Pu0WWqGck7FlzFyJLkOtD0z1hFzIuNBO3-GuW30lfadAECVXdH4NM36SztF5abPMo62QcAwbPn6uy5qLKsvHXTv5g8zQsUDw/s1600/FlyBirdwoodenletters-facebook2.png"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEMJczJ2Vk9iP-G4KhDW588fDrQCC0shy-SzD__KjZ2r4fw1z9HUXljQfLpnfYS6GQY0GE0G0M1oQYy9qXNZMjORgB6oDi-BOjwX-lZSsb_0_GtCFAqHh09yUP71asMyQxsXmgiPs8AY/s1600/FlyBirdwoodenletters-twitter2.png"/></a>
</div>
<div class="desk">
<div class="desk01"></div>
<div class="desk02"></div>
<div class="desk03"></div>
<div class="desk04"></div>
<div class="desk05"></div>
<div onmouseenter="bleep.play()" onmouseleave="bleep2.play()" class="desk06"></div>
<div onmouseenter="bleep.play()" onmouseleave="bleep2.play()" class="desk07"></div>
<div class="desk08"></div>
<div class="desk09"></div>
<div onmouseenter="bleep.play()" onmouseleave="bleep2.play()" class="desk10"></div>
<div onmouseenter="bleep.play()" onmouseleave="bleep2.play()" class="desk11"></div>
<div class="desk12"></div>
<div class="desk13"></div>
<div class="desk14"></div>
</div>
<div style="clear:both"></div>
</div>
<div class="floor-wrap">
<div class="frame"></div>
</div>
</div>
<style>
#Cabinet {
width: 100%;
margin: 0;
padding: 0 0 0px;
/* background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhGtFj9Iqzw1W_GQ2CUrEA_0KFSzQaPGYIm6fuOyYHybM1OOzuyiD8D_Xg1hhFRqaJb_Sge3UlStqFNGFE9T6kl0ctpPpGHf5pXKwl2YoM7GtGJuTK4xnVOsYJgTZWWk0KE4Wp-xsiDlk6o5Toq-jaGSDz5QNtkHCXhgPCxs4HIYXjdLWyCuPt0gQJO);
background-size:auto;
background-repeat: repeat;
text-align: center;
background-position: top center;
background-size: 20%; */
overflow:hidden;
position: relative;
border-radius: 0;
/*box-shadow: none;*/
}
#Cabinet::before {
content: '';
display: block;
height: 500px;
width:500px;
background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhGtFj9Iqzw1W_GQ2CUrEA_0KFSzQaPGYIm6fuOyYHybM1OOzuyiD8D_Xg1hhFRqaJb_Sge3UlStqFNGFE9T6kl0ctpPpGHf5pXKwl2YoM7GtGJuTK4xnVOsYJgTZWWk0KE4Wp-xsiDlk6o5Toq-jaGSDz5QNtkHCXhgPCxs4HIYXjdLWyCuPt0gQJO);
background-size:auto;
background-repeat: repeat;
background-size: 30%;
border-radius:100%;
box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 50%);
position: absolute;
top: 75px;
left: calc(50% - 250px);
}
.frame {
width:100%;
height:40px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6th5JysZ_QzmtujWz9VzqilyHiV32aYhNMeYukiiPmCxLJyoWoucEkuXE5jSkdRUVskCL4Wvl1DqSJu7_2MYnVqrA5ebPECfeFcE2QuHoTQgqVAScOmtKJjooTaXOLmgCnrzGNZUsrg/s1600/FlyBirdwooden-menu.jpg);
background-size:contain;
box-shadow: 0 5px 10px 0px rgba(0,0,0,.5);
border-bottom:3px solid #000;
border-top:3px solid #000;
}
/*
.shade::before {
content: '';
display: block;
height: 100%;
width: 0;
box-shadow: 60px 0px 80px 70px rgba(0,0,0,.7);
position: absolute;
}
.shade::after {
content: '';
display: block;
height: 100%;
width: 0;
box-shadow: -60px 0px 80px 70px rgba(0,0,0,.7);
position: absolute;
right:0;
}
*/
.cabinet-main-wrap {
width:835px;
margin:0 auto;
position: relative;
}
/* icons */
.icons {
width:110px;
position: absolute;
right:80px;
top:40px;
z-index:3;
display:none!important
}
/*
.banner {
position: relative;
left: -50px;
height: 150px;
width:200px;
}
.banner img {
width:200px;
height:auto;
}
.banner::after {
content:'';
display:block;
width:170px;
height: 100px;
border-radius: 100%;
background: rgba(0,0,0,.25);
position: absolute;
top:35px;
left:10px;
box-shadow: 0 0 16px 10px rgba(0,0,0,.25);
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
z-index: -1;
}
.icons a {
position: relative;
display: inline-block;
width:50px;
padding-top:10px;
}
.icons a img {
width:50px;
height:auto;
}
.icons a::after {
content:'';
display:block;
width:40px;
height: 40px;
border-radius: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top:18px;
left:3px;
box-shadow: 0 0 16px 5px rgba(0,0,0,.99);
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
z-index: -1;
}
.icons a:hover::after {
box-shadow: 0 0 12px 2px rgba(0,0,0,.99);
-webkit-transition: box-shadow 0.1s ease-in-out;
transition: box-shadow 0.1s ease-in-out;
}
*/
/* pictures */
.pictures {
width: 100%;
margin: 100px 0 -75px -60px;
position:relative;
z-index: 0;
text-align: center;
}
.picture01, .picture02 {
/*width:300px;*/
display:inline-block;
}
.picture01 {display:none!important}
.picture02 {width:450px}
.pictures img {
/*width:200px;
height:148px;*/
width:300px;
height:248px;
}
.video-wrap {
/*width:200px;
height:148px;*/
width:300px;
height:248px;
margin-left:50px;
overflow:hidden;
}
.pictures video {
width:auto;
/*height:148px;*/
height:248px;
}
.picture02 video {float: right;}
.picture01 .video-wrap {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga38rs_oE5_79IwIxd0S_MsSNaBtPJGBWGIs3FxWD1nCbGpFwZHiS1Uoqhd4O0f3jIA_B_GcuKQTP9ZJEGJy4zYpJPlAQCX8eimZ9MteCBQwiv1td5eG3PsZD_sfayVH0k902lHL5vDoU/s1600/1.jpg) no-repeat;
background-size:contain;
}
.picture02 .video-wrap {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRGNy1qhVZGyfmZ57CfdqaZ0k3snd7G86NV_Gri90kiuuanyPr5ohAZLwg6PSysOiY8LUZfCE-JE5bfLUHT-JMJUe-bQ0Fxrq7T8YkoUQP72-lzmCgelN6R7I8WupuHocu9WW0ARDRgE/s1600/2.jpg) no-repeat;
/*background-size:contain;*/
background-size:cover;
background-position: right;
}
.picture01::before,
.picture02::before {
content:'';
display:block;
/*width:200px;
height:148px;*/
width:300px;
height:248px;
background:#0b536b;
position:absolute;
z-index:0;
top:0;
margin-left:52px;
opacity:0.05;
}
.picture01::before {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqA9Vm3MHnxTizST4Q00rd0_Gdu_C9ytBjYZAXEBGB80rFCe2IZA2dyz5wl18VFH1LDlD5oyxvaeRFZq4qmjoUJLcvOKyU67_8rQlijx3Q63ce7c15LceHe-xFFFDpC2ne8wZvzdFgWuQ/s1600/WOODEN-SIGN.png) no-repeat;
background-size:70%;
opacity:1;
background-position: 80% 100%;
}
.picture01::after,
.picture02::after {
content: '';
display: block;
/*width:300px;
height:282px;*/
width:450px;
height:382px;
position:absolute;
top:-65px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8euYUvpCbmxudObeQ_V_0xJD4zwR3y3sKJojHb8MvG4tcL7UbBRMeww77LnGBhhsvScyxcQs4zwC7eLHFTxibdYUX3p1RICPEtCrY5du3ipolo2ffUbiR0m_kWpPDjNfCF_7objOlSRo/s1600/FBwoodenframe-framewithshaddow-over2.png) no-repeat;
background-size:contain;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.picture02:hover::after {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7J89_ysCFCnXcEhwlSpQJuOURiedoZTqejTcqNK7gjzey52I5IaiUGm_Dt244hgGWJ2IIWEpVZghfHSI9uvce_Oz5DIBntxc6w_DiQQehP6iqpWRj0MLvmXCqO57SBZDEJSk1oOWypo/s1600/FBwoodenframe-framewithshaddow.png) no-repeat;
background-size:contain;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
/* desk */
.desk {
padding: 0;
margin: 0;
z-index: 1;
position:relative;
}
.desk::before {
content:'';
display:block;
width:500px;
margin-left:100px;
height:0;
box-shadow: 0px 200px 50px 50px rgb(0 0 0 / 50%);
}
.desk div {
display:inline-block;
padding:0;
margin:0;
float:left;
background-size: cover;
}
.desk01 {
width:835px;
height:138px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43uYoOXAFhtd53JtaoO7eps6EK5ImXdRzUHFtbcQhn102UZ5L6FKwS3cb-QGuKUqcmRImihryN99ekVz-YpXXXNOt2W8unTQI6KEZi_qBb7aYX0S50Vp87xekBv1GAtujRMq-fG48CnA/s1600/szafka_01.png) no-repeat;
}
.desk02 {
width:346px;
height:48px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0EEBwnQcVoP5WzaFqHV0NfYwHLGfWlfijbRFnYH6E20bSkWlx0wIQsKXjC6rtG__-oM301xMO5pK-bqXedhMTdHHvKWXuegAD09q-7q2Z8Yj_hWnEAFNw7md6VFBNYjVZjv3X542C5g/s1600/szafka_02.png) no-repeat;
}
.desk03 {
width:108px;
height:48px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-W94HBrXJvYzyqCHdVtk9AzBMHEJzgpoCbwAyhUzTd3zFKYXN4Vu_4sPMedQ5P6_DuUZc1jbm26Neo0AmaS7n30Sj_CsPmXVgaqc5GEOpTua9t41R0l_BOUiwBTXTEYt3MYFNiuS1lpM/s1600/szafka_03.png) no-repeat;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.desk03::after {
content:'';
display:block;
width:108px;
height:48px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcHRbtAT79LMT7LapNt85xADtlQXJrVd8kSEoIIuQvZs7O3kqnaPk5PMbYqPlfTOV8da40BHi-4jUA7pUSxmEZCG7novDPE2EjvWz8hljMpIdaNCgHyrj1zTrkF7C1dXbFQOXBE43090/s1600/szafka2_03.png) no-repeat;
background-size: cover;
position: absolute;
opacity:0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk03:hover::after {
opacity:1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk04 {
width:381px;
height:48px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBW7PCDNd9I7M27pgWULcl69xJXlVjxhvwd8v65IwCXb3bkOV3iciONFpavC1hNRiRFzePLUUZc3UANUTEJaKxerHD4NwXNlHX4W4H3e1_3qGkN5fbpuAY-e3mkNUoLiGrxw81IG0l-g/s1600/szafka_04.png) no-repeat;
}
.desk05 {
width:58px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6eT8cqg6dUE00_ZbWGZfvijpiUJoep4thbgPI71QJvcsQ_fo3wPvWMD5ZMRE0hanC1oLU8249smwtHxjz9X84XfnBOVOElrHIWK4GOjkDhgdmyKLS4AfLTgRFKc6oNut7sHzK0np8is/s1600/szafka_05.png) no-repeat;
}
.desk06 {
width:288px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc_ILvOU3fULCzKfIxzvIyf7v18bQOo7RzALuyM4gZUOt1Xm5T0UrbGZrDTOF-ayzLShQzlLl-egKZ32RWTzwaYkl5-sV3PUFL2m32XxAG6u_ErrP-Q0_n88eMeUJMVAlDG3IW0YJ60RM/s1600/szafka_06.png) no-repeat;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.desk06::after {
content:'';
display:block;
width:288px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF3hsUbsMm3F_qFbC9EkZGmRh7tBd8xDpiUx_83UwZL5fmTErqCYOn8YFxdfLY1ebcWYePTMA-gdCZvSBS6JRUR90RbKIx8hy7AIhdVNf_rwTO31U1S9rVrERRA_10Nv0mjQt1N4DAGQY/s1600/szafka2_06.png) no-repeat;
background-size: cover;
position: absolute;
opacity:0
-moz-animation:open2 10s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
-webkit-animation:open2 10s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
animation:open2 10s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
}
.desk06:hover::after {
opacity:1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk07 {
width:287px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpKclC4oKKnZgdwhNz1n_HXryIN00RLBTWTHBGxfE-Ih9wVRy69AHaqyQSS2BNKRWFGkqmmYoksV1XvKlrEhDgPlF_6lzH9Dz-z7YzwoZ9DgovXp7TjQdF0F_adJKhdzNiWlINjpeuxU/s1600/szafka_07.png) no-repeat;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.desk07::after {
content:'';
display:block;
width:287px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdOw9o41t9wHUGNcdOzrMfZf3hnAhPXloJz_00CrZloxr1F_3lSWnljc0AO-fhGEQS1lBHhi-KXf8e7B-fnsSdxU7xVHcPFYr0gEHm_l1y9LjNqisrzylWrGclWTAtRZMrsw6n2Ypa48/s1600/szafka2_07.png) no-repeat;
background-size: cover;
position: absolute;
opacity:0
-moz-animation:open1 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
-webkit-animation:open1 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
animation:open1 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
}
.desk07:hover::after {
opacity:1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk08 {
width:202px;
height:129px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuOIXjxlmrkpl7SBXnUtlnNgpqsuMqBbrkAnRtpxY5gM_FAQIszha861eJGN-H_IPLDOfYnGBwDhroiJrCwoiPLnl3W4sv8qmUmCfj9tncHvGBvnrbq5CwkmVp_1Zq3SuTjByqJmg2OLo/s1600/szafka_08.png) no-repeat;
}
.desk09 {
width:58px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSJkI27LVIuDLaJqyObT1PUoqRYHkNiKGWTjAHCuiP4I_3YB9B41rj7PUOsCw-jy0-8fyNo6z0Ju99P_2WAw86oQpE5vdhHQGY4DZLtUH8jUC8d_tFxN3WQBm0bWqsvryePD0Jd2usqEo/s1600/szafka_09.png) no-repeat;
}
.desk10 {
width:288px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLosAXDsePM2RRtG5DfnClokImrwyLZILV2GuIx-bN5hiRt6zey1OfMuXKcpszR1WL0zQ-tLIeIpDNDBM6KoxIJc2YXGEBJGG3z3Ohkg4blH-LT0XEw3LYDPzBjtScyRj0ss28SAazYT8/s1600/szafka2_10.png) no-repeat;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.desk10::after {
content:'';
display:block;
width:288px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnpZ3mouCirRtGIHMj-f0ilpThvEpII4vKjwdwcl_kZOtotqWkgXNZZxtOMxupJNyCLiz1P2Moub8EKRJA3NZ1FZYy0nnoD8DMgGdNsmGOeYBydQDbnHW4LXbbzmvmMfAZiDVqjXGMfs/s1600/szafka_10.png) no-repeat;
background-size: cover;
position: absolute;
opacity:1;
-moz-animation:open3 6s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
-webkit-animation:open3 6s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
animation:open3 6s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
}
.desk10:hover::after {
opacity:0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk11 {
width:287px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6eYcNBB0txBIS6bkjol5ap63tjH1GiizuFfZK-nXRK4LBCMUVVrlmFULve5J40-3oAs2xKOVq6LbAzih241NXt3Y6QR_-B7ccJPcdL5_ZeZOsoDl6YnLlAuqvuiRZXA6xdFjraKVikfY/s1600/szafka_11.png) no-repeat;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
.desk11::after {
content:'';
display:block;
width:287px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmV1ERurVJeQb0T1Rrbhmv7rJ9cHCuXRr6SqTRUtlfLE8k1u9X-CdDlk5cuw3PrzTcu7JxoTxwwGw8wqRJSZhqkrkP5PNOxzuW_6nlKCp4oTZ2aB4mBQF239VzNiV9Llt1rWmYWJpr1-c/s1600/szafka2_11.png) no-repeat;
background-size: cover;
position: absolute;
opacity:0;
-moz-animation:open2 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) 3s infinite;
-webkit-animation:open2 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) 3s infinite;
animation:open2 8s cubic-bezier(0.09, 1.8, 0.26, 1.65) 3s infinite;
}
.desk11:hover::after {
opacity:1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk12 {
width:105px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnAFnyfCTPh4a4puHFKb9TlZslLRrnl-cAhGTPtZgIH2oJEoKvxI_tFduuxctPa0OYBNJRWgPIhWMpFLKAE0ooLVp5CoJk1jrVGVbM5FfaGgc0LNEI42Q28fcY_3C1yzM_RaXhWCtYgU/s1600/szafka_12.png) no-repeat;
-webkit-transition: background-image 0.2s ease-out;
transition: background-image 0.2s ease-out;
}
.desk12::after {
content:'';
display:block;
width:105px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhJcT3JAt44X6Ab18IdS88RQdvQ1PqczHi-RmpAyV4gM0a6EqIG7I5z6g7S7uWK9lzSFgL4tUZys0KTLLMGXzUgeQZWVHWIUJJyWrsOpUEcrGY-pAKupldhVdsUB_aUMgCGlQRzo19Mc/s1600/szafka2_12.png) no-repeat;
background-size: cover;
position: absolute;
opacity:0;
-moz-animation:open1 3s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
-webkit-animation:open1 3s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
animation:open1 3s cubic-bezier(0.09, 1.8, 0.26, 1.65) infinite;
}
.desk12:hover::after {
opacity:1;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.desk13 {
width:97px;
height:106px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDbYpKk2S3DD8FXSK0GeVtF71UbDSmHvXnDGBxBspL1tpotiM1y-YUz2eMNsr2OQZd540NzQla0u3kZiCOsq1k32OF5BFNuGgdfJlXFnIgPPGyxVyR0x7c4yJPqmXqYXAtz1US_Pr9W0/s1600/szafka_13.png) no-repeat;
}
.desk14 {
width:835px;
height:57px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzP0pwLWmnuB2ojLVIN8k7aW39pnG9Gb2JV7gmhXBV4cyhYEmW5FxH0cBeF_L_o7aq7Pai7-uDpYhYAE3k89zsxkh03_BjGxW1cjVwhdC8f4TaKuv46QyIltgKd532bf9RVwJQWxYkZ3U/s1600/szafka_14.png) no-repeat;
}
@-moz-keyframes open3 {
0%, 15%, 80%, 100% {
opacity:1;
}
20%, 75% {
opacity:0
}
}
@-webkit-keyframes open3 {
0%, 15%, 80%, 100% {
opacity:1;
}
20%, 75% {
opacity:0
}
}
@keyframes open3 {
0%, 15%, 80%, 100% {
opacity:1;
}
20%, 75% {
opacity:0
}
}
@-moz-keyframes open2 {
0%, 25%, 60%, 100% {
opacity:0;
}
30%, 50% {
opacity:1
}
}
@-webkit-keyframes open2 {
0%, 25%, 60%, 100% {
opacity:0;
}
30%, 50% {
opacity:1
}
}
@keyframes open2 {
0%, 25%, 60%, 100% {
opacity:0;
}
30%, 50% {
opacity:1
}
}
@-moz-keyframes open1 {
0%, 75%, 100% {
opacity:0;
}
50% {
opacity:1
}
}
@-webkit-keyframes open1 {
0%, 75%, 100% {
opacity:0;
}
50% {
opacity:1
}
}
@keyframes open1 {
0%, 75%, 100% {
opacity:0;
}
50% {
opacity:1
}
}
/* floor */
.floor-wrap {
margin-top:-140px;
position:relative;
box-shadow: 0 0px 15px 0px rgb(0 0 0 / 25%);
border-top:3px solid #111;
}
.floor-wrap .frame::after {
content:'';
display:block;
width:100%;
height:160px;
/* background:#e3e7e7 url('https://blogger.googleusercontent.com/img/a/AVvXsEj6ZjtwhdrUO4QHb-3HGUJeLfHHfhABZfn-NR8t2r_8wwmXRNsreaQx9uFJZKEu4rTzKJMl1kCS0AHXNjeRTZ5bYdy8g9DJtpe7i2TNbs21Gx2nctNapE1kwY8FFUjRXAFUkI0paFVYFO_t2f_ulVr6eGIlmSXvBPvWKnQV0qhjyp9DxDRV1HlQh2Sf') no-repeat;
background-position: bottom center;
background-size: cover;*/
position:absolute;
top:42px;
}
@media only screen and (max-width: 992px) {
#Cabinet {
padding-bottom:10px
}
.frame {
height:20px;
}
.cabinet-main-wrap {
width:417px;
}
.desk::before {
width:200px;
margin-left:70px;
box-shadow: 0px 120px 60px 60px rgba(0,0,0,.5);
}
.desk01 {
width:417px;
height:69px;
}
.desk02 {
width:173px;
height:24px;
}
.desk03, .desk03::after {
width:54px;
height:24px;
}
.desk04 {
width:190px;
height:24px;
}
.desk05 {
width:29px;
height:64px;
}
.desk06, .desk06::after {
width:144px;
height:64px;
}
.desk07, .desk07::after {
width:143px;
height:64px;
}
.desk08 {
width:101px;
height:64px;
}
.desk09 {
width:29px;
height:53px;
}
.desk10, .desk10::after {
width:144px;
height:53px;
}
.desk11, .desk11::after {
width:144px;
height:53px;
}
.desk12, .desk12::after {
width:52px;
height:53px;
}
.desk13 {
width:47px;
height:53px;
}
.desk14 {
width:417px;
height:28px;
}
/* icons */
.icons {
width:70px;
top:35px;
right:10px
}
.banner {
left: -20px;
height: 100px;
width:110px;
}
.banner::after {
width:100px;
height: 50px;
top:25px;
left:7px;
}
.banner img {
width:110px;
height:auto;
}
.icons a {
padding-top:0px;
width:30px;
}
.icons a img {
width:30px;
}
.icons a::after {
width:20px;
height: 20px;
top:10px;
left:3px;
box-shadow: 0 0 11px 5px rgba(0,0,0,.99);
}
.icons a:hover::after {
box-shadow: 0 0 12px 2px rgba(0,0,0,.99);
-webkit-transition: box-shadow 0.1s ease-in-out;
transition: box-shadow 0.1s ease-in-out;
}
/* pictures */
.pictures {
width:303px;
margin:20px 0 -50px 20px;
position:relative;
z-index: 0;
}
.picture01, .picture02 {
width:140px;
height:141px;
display:inline-block;
position:relative;
}
.picture01 img, .picture02 img {
width:105px;
height:auto;
margin-top:30px;
}
.video-wrap {
width:105px;
height:74px;
margin-left:20px;
margin-top:30px;
overflow:hidden;
}
.pictures video {
display:none
}
.picture01 .video-wrap {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbAsnbpKMRziVv38M1zxZsKVLzaiHv0fxzBDeO_D-oEdklFHAlb5fu9OESn3BxYqBNlv-IO5xENRh_WVrB61zOidUi_eaC4Stg515MJDINJuXKWxVX9Ja6IMbO7jgwiE3St1tCAOmX_I/s1600/1.jpg) no-repeat;
background-size:contain;
}
.picture02 .video-wrap {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyChsvExIfB9Dtrn3YW-NVxHWdrgBdys1iMCvfyel4FKuyAOBznEapz4sDzEaDtGSTAS8ofb5Q87W9A33fq7vLn57IssSsSFd6ChMhVmZE7Ueu4OR_JT0EbtZaZPlSJ4yEc6QiQyCkNa0/s1600/2.jpg) no-repeat;
background-size:contain;
}
.picture01::after,
.picture02::after {
content: '';
display: block;
width:150px;
height:141px;
position:absolute;
top:0px;
}
.picture01::before,
.picture02::before {
width:105px;
height:90px;
margin-left:20px;
top:25px;
}
/* floor */
.floor-wrap {
margin-top:-70px;
box-shadow:0 0px 15px 0px rgb(0 0 0 / 25%);
}
.floor-wrap .frame::after {
height:55px;
top:23px;
}
}
</style>FlyBird's Box | Web-Savvy Designs http://www.blogger.com/profile/09001302414360234988noreply@blogger.com0