Skip to content

Instantly share code, notes, and snippets.

@b4z81

b4z81/Pure-CSS-One-Div-Weather-Animated-Icons.markdown

Created August 6, 2014 08:52
Show Gist options
  • Save b4z81/521804f7f9979c70f7de to your computer and use it in GitHub Desktop.
Save b4z81/521804f7f9979c70f7de to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. b4z81 created this gist Aug 6, 2014.
    7 changes: 7 additions & 0 deletions Pure-CSS-One-Div-Weather-Animated-Icons.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Pure CSS One Div Weather Animated Icons
    ---------------------------------------


    A [Pen](http://codepen.io/fbrz/pen/iqtlk) by [Fabrizio Bianchi](http://codepen.io/fbrz) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/fbrz/pen/iqtlk/license).
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <h1>Pure CSS One Div Weather Animated Icons</h1>
    <div id="fabrizio"></div>

    <div class="container">
    <div class="sunny"></div>
    <div class="cloudy"></div>
    <div class="rainy"></div>
    <div class="snowy"></div>
    <div class="rainbow"></div>
    <div class="starry"></div>
    <div class="stormy"></div>
    </div>
    619 changes: 619 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,619 @@
    /* SUNNY */
    .sunny {
    animation: sunny 15s linear infinite;
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    height: 140px;
    width: 20px;
    margin-left: -15px;
    position: absolute;
    left: 90px;
    top: 20px;
    }
    .sunny:before {
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    content: '';
    height: 140px;
    width: 20px;
    opacity: 1;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: rotate(90deg);
    }
    .sunny:after {
    background: #FFEE44;
    border-radius: 50%;
    box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
    content: '';
    height: 80px;
    width: 80px;
    position: absolute;
    left: -30px;
    top: 30px;
    }
    @keyframes sunny {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    /* CLOUDY */
    .cloudy {
    animation: cloudy 5s ease-in-out infinite;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow:
    #FFFFFF 65px -15px 0 -5px,
    #FFFFFF 25px -25px,
    #FFFFFF 30px 10px,
    #FFFFFF 60px 15px 0 -10px,
    #FFFFFF 85px 5px 0 -5px;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 255px;
    top: 70px;
    }
    .cloudy:after {
    animation: cloudy_shadow 5s ease-in-out infinite;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    transform: scale(.7);
    }
    @keyframes cloudy {
    50% { transform: translateY(-20px); }
    }
    @keyframes cloudy_shadow {
    50% { transform: translateY(20px) scale(1); opacity:.05; }
    }

    /* RAINY */
    .rainy {
    animation: rainy 5s ease-in-out infinite 1s;
    background: #CCCCCC;
    border-radius: 50%;
    box-shadow:
    #CCCCCC 65px -15px 0 -5px,
    #CCCCCC 25px -25px,
    #CCCCCC 30px 10px,
    #CCCCCC 60px 15px 0 -10px,
    #CCCCCC 85px 5px 0 -5px;
    display: block;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 427px;
    top: 70px;
    }
    .rainy:after {
    animation: rainy_shadow 5s ease-in-out infinite 1s;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    transform: scale(.7);
    }
    .rainy:before {
    animation: rainy_rain .7s infinite linear;
    content: '';
    background: #CCCCCC;
    border-radius: 50%;
    display: block;
    height: 6px;
    width: 3px;
    opacity: 0.3;
    transform: scale(.9);
    }
    @keyframes rainy {
    50% { transform: translateY(-20px); }
    }
    @keyframes rainy_shadow {
    50% { transform: translateY(20px) scale(1); opacity: 0.05; }
    }
    @keyframes rainy_rain {
    0% {
    box-shadow:
    rgba(0,0,0,0) 30px 30px,
    rgba(0,0,0,0) 40px 40px,
    #000 50px 75px,
    #000 55px 50px,
    #000 70px 100px,
    #000 80px 95px,
    #000 110px 45px,
    #000 90px 35px;
    }
    25% {
    box-shadow:
    #000 30px 45px,
    #000 40px 60px,
    #000 50px 90px,
    #000 55px 65px,
    rgba(0,0,0,0) 70px 120px,
    rgba(0,0,0,0) 80px 120px,
    #000 110px 70px,
    #000 90px 60px;
    }
    26% {
    box-shadow:
    #000 30px 45px,
    #000 40px 60px,
    #000 50px 90px,
    #000 55px 65px,
    rgba(0,0,0,0) 70px 40px,
    rgba(0,0,0,0) 80px 20px,
    #000 110px 70px,
    #000 90px 60px;
    }
    50% {
    box-shadow:
    #000 30px 70px,
    #000 40px 80px,
    rgba(0,0,0,0) 50px 100px,
    #000 55px 80px,
    #000 70px 60px,
    #000 80px 45px,
    #000 110px 95px,
    #000 90px 85px;
    }
    51% {
    box-shadow:
    #000 30px 70px,
    #000 40px 80px,
    rgba(0,0,0,0) 50px 45px,
    #000 55px 80px,
    #000 70px 60px,
    #000 80px 45px,
    #000 110px 95px,
    #000 90px 85px;
    }
    75% {
    box-shadow:
    #000 30px 95px,
    #000 40px 100px,
    #000 50px 60px,
    rgba(0,0,0,0) 55px 95px,
    #000 70px 80px,
    #000 80px 70px,
    rgba(0,0,0,0) 110px 120px,
    rgba(0,0,0,0) 90px 110px;
    }
    76% {
    box-shadow:
    #000 30px 95px,
    #000 40px 100px,
    #000 50px 60px,
    rgba(0,0,0,0) 55px 35px,
    #000 70px 80px,
    #000 80px 70px,
    rgba(0,0,0,0) 110px 25px,
    rgba(0,0,0,0) 90px 15px;
    }
    100% {
    box-shadow:
    rgba(0,0,0,0) 30px 120px,
    rgba(0,0,0,0) 40px 120px,
    #000 50px 75px,
    #000 55px 50px,
    #000 70px 100px,
    #000 80px 95px,
    #000 110px 45px,
    #000 90px 35px;
    }
    }


    /* RAINBOW */
    .rainbow {
    animation: rainbow 5s ease-in-out infinite;
    border-radius: 170px 0 0 0;
    box-shadow:
    #FB323C -2px -2px 0 1px,
    #F99716 -4px -4px 0 3px,
    #FEE124 -6px -6px 0 5px,
    #AFDF2E -8px -8px 0 7px,
    #6AD7F8 -10px -10px 0 9px,
    #60B1F5 -12px -12px 0 11px,
    #A3459B -14px -14px 0 13px;
    height: 70px;
    width: 70px;
    margin-left: -40px;
    position: absolute;
    left: 610px;
    top: 71px;
    transform: rotate(40deg);
    }
    .rainbow:after {
    animation: rainbow_shadow 5s ease-in-out infinite;
    background: #000000;
    border-radius: 50%;
    content: '';
    opacity: 0.2;
    height: 15px;
    width: 120px;
    position: absolute;
    bottom: -23px;
    left: 17px;
    transform: rotate(-40deg);
    transform-origin: 50% 50%;
    }
    @keyframes rainbow {
    50% { transform: rotate(50deg); }
    }
    @keyframes rainbow_shadow {
    50% { transform: rotate(-50deg) translate(10px) scale(.7); opacity: 0.05; }
    }

    /* STARRY */
    .starry {
    animation: starry_star 5s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow:
    #FFFFFF 26px 7px 0 -1px,
    rgba(255,255,255,0.1) -36px -19px 0 -1px,
    rgba(255,255,255,0.1) -51px -34px 0 -1px,
    #FFFFFF -52px -62px 0 -1px,
    #FFFFFF 14px -37px,
    rgba(255,255,255,0.1) 41px -19px,
    #FFFFFF 34px -50px,
    rgba(255,255,255,0.1) 14px -71px 0 -1px,
    #FFFFFF 64px -21px 0 -1px,
    rgba(255,255,255,0.1) 32px -85px 0 -1px,
    #FFFFFF 64px -90px,
    rgba(255,255,255,0.1) 60px -67px 0 -1px,
    #FFFFFF 34px -127px,
    rgba(255,255,255,0.1) -26px -103px 0 -1px;
    height: 4px;
    width: 4px;
    margin-left: -10px;
    opacity: 1;
    position: absolute;
    left: 777px;
    top: 150px;
    }
    .starry:after {
    animation: starry 5s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: #FFFFFF -25px 0;
    content: '';
    height: 100px;
    width: 100px;
    position: absolute;
    top: -106px;
    transform: rotate(-5deg);
    transform-origin: 0 50%;
    }

    @keyframes starry {
    50% { transform: rotate(10deg); }
    }
    @keyframes starry_star {
    50% {
    box-shadow:
    rgba(255,255,255,0.1) 26px 7px 0 -1px,
    #FFFFFF -36px -19px 0 -1px,
    #FFFFFF -51px -34px 0 -1px,
    rgba(255,255,255,0.1) -52px -62px 0 -1px,
    rgba(255,255,255,0.1) 14px -37px,
    #FFFFFF 41px -19px,
    rgba(255,255,255,0.1) 34px -50px,
    #FFFFFF 14px -71px 0 -1px,
    rgba(255,255,255,0.1) 64px -21px 0 -1px,
    #FFFFFF 32px -85px 0 -1px,
    rgba(255,255,255,0.1) 64px -90px,
    #FFFFFF 60px -67px 0 -1px,
    rgba(255,255,255,0.1) 34px -127px,
    #FFFFFF -26px -103px 0 -1px;
    }
    }

    /* STORMY */
    .stormy {
    animation: stormy 5s ease-in-out infinite;
    background: #222222;
    border-radius: 50%;
    box-shadow:
    #222222 65px -15px 0 -5px,
    #222222 25px -25px,
    #222222 30px 10px,
    #222222 60px 15px 0 -10px,
    #222222 85px 5px 0 -5px;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 947px;
    top: 70px;
    }
    .stormy:after {
    animation: stormy_shadow 5s ease-in-out infinite;
    background: #000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    transform: scale(.7);
    }
    .stormy:before {
    animation: stormy_thunder 2s steps(1, end) infinite;
    border-left: 0px solid transparent;
    border-right: 7px solid transparent;
    border-top: 43px solid yellow;
    box-shadow: yellow -7px -32px;
    content: '';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    left: 57px;
    top: 70px;
    transform: rotate(14deg);
    transform-origin: 50% -60px;
    }
    @keyframes stormy {
    50% { transform: translateY(-20px); }
    }
    @keyframes stormy_shadow {
    50% { transform: translateY(20px) scale(1); opacity: 0.05; }
    }
    @keyframes stormy_thunder {
    0% { transform: rotate(20deg); opacity:1; }
    5% { transform: rotate(-34deg); opacity:1; }
    10% { transform: rotate(0deg); opacity:1; }
    15% { transform: rotate(-34deg); opacity:0; }
    }

    /* SNOWY */
    .snowy {
    animation: snowy 5s ease-in-out infinite 1s;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow:
    #FFFFFF 65px -15px 0 -5px,
    #FFFFFF 25px -25px,
    #FFFFFF 30px 10px,
    #FFFFFF 60px 15px 0 -10px,
    #FFFFFF 85px 5px 0 -5px;
    display: block;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 1112px;
    top: 70px;
    }
    .snowy:after {
    animation: snowy_shadow 5s ease-in-out infinite 1s;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 8px;
    bottom: -60px;
    transform: scale(.7);
    }
    .snowy:before {
    animation: snowy_snow 2s infinite linear;
    content: '';
    border-radius: 50%;
    display: block;
    height: 7px;
    width: 7px;
    opacity: 0.8;
    transform: scale(.9);
    }
    @keyframes snowy {
    50% { transform: translateY(-20px); }
    }
    @keyframes snowy_shadow {
    50% { transform: translateY(20px) scale(1); opacity: 0.05; }
    }
    @keyframes snowy_snow {
    0% {
    box-shadow:
    rgba(238,238,238,0) 30px 30px,
    rgba(238,238,238,0) 40px 40px,
    #EEEEEE 50px 75px,
    #EEEEEE 55px 50px,
    #EEEEEE 70px 100px,
    #EEEEEE 80px 95px,
    #EEEEEE 110px 45px,
    #EEEEEE 90px 35px;
    }
    25% {
    box-shadow:
    #EEEEEE 30px 45px,
    #EEEEEE 40px 60px,
    #EEEEEE 50px 90px,
    #EEEEEE 55px 65px,
    rgba(238,238,238,0) 70px 120px,
    rgba(238,238,238,0) 80px 120px,
    #EEEEEE 110px 70px,
    #EEEEEE 90px 60px;
    }
    26% {
    box-shadow:
    #EEEEEE 30px 45px,
    #EEEEEE 40px 60px,
    #EEEEEE 50px 90px,
    #EEEEEE 55px 65px,
    rgba(238,238,238,0) 70px 40px,
    rgba(238,238,238,0) 80px 20px,
    #EEEEEE 110px 70px,
    #EEEEEE 90px 60px;
    }
    50% {
    box-shadow:
    #EEEEEE 30px 70px,
    #EEEEEE 40px 80px,
    rgba(238,238,238,0) 50px 100px,
    #EEEEEE 55px 80px,
    #EEEEEE 70px 60px,
    #EEEEEE 80px 45px,
    #EEEEEE 110px 95px,
    #EEEEEE 90px 85px;
    }
    51% {
    box-shadow:
    #EEEEEE 30px 70px,
    #EEEEEE 40px 80px,
    rgba(238,238,238,0) 50px 45px,
    #EEEEEE 55px 80px,
    #EEEEEE 70px 60px,
    #EEEEEE 80px 45px,
    #EEEEEE 110px 95px,
    #EEEEEE 90px 85px;
    }
    75% {
    box-shadow:
    #EEEEEE 30px 95px,
    #EEEEEE 40px 100px,
    #EEEEEE 50px 60px,
    rgba(238,238,238,0) 55px 95px,
    #EEEEEE 70px 80px,
    #EEEEEE 80px 70px,
    rgba(238,238,238,0) 110px 120px,
    rgba(238,238,238,0) 90px 110px;
    }
    76% {
    box-shadow:
    #EEEEEE 30px 95px,
    #EEEEEE 40px 100px,
    #EEEEEE 50px 60px,
    rgba(238,238,238,0) 55px 35px,
    #EEEEEE 70px 80px,
    #EEEEEE 80px 70px,
    rgba(238,238,238,0) 110px 25px,
    rgba(238,238,238,0) 90px 15px;
    }
    100% {
    box-shadow:
    rgba(238,238,238,0) 30px 120px,
    rgba(238,238,238,0) 40px 120px,
    #EEEEEE 50px 75px,
    #EEEEEE 55px 50px,
    #EEEEEE 70px 100px,
    #EEEEEE 80px 95px,
    #EEEEEE 110px 45px,
    #EEEEEE 90px 35px;
    }
    }









































    body {
    font-family: sans-serif;
    background: #f5f5f5;
    margin: 0;
    }
    h1 {
    text-align: center;
    font-weight: 400;
    position: absolute;
    width: 100%;
    font-size: 15px;
    top: 50%;
    margin-top: -130px;
    opacity: .6;
    letter-spacing: 6px;
    }
    #fabrizio {
    border-top: 100px solid black;
    border-right: 63px solid transparent;
    width: 0;
    transform: scale(.33);
    transform-origin: 0 0;
    margin: 20px;
    opacity:.6
    }
    #fabrizio:before {
    background: black;
    width: 20px;
    height: 30px;
    content: '';
    display: block;
    transform: skewX(-32deg);
    position: relative;
    top: -64px;
    left: 30px;
    }
    #fabrizio:after {
    background: black;
    width: 40px;
    height: 36px;
    content: '';
    display: block;
    transform: skewX(-32deg);
    position: relative;
    top: -130px;
    left: 50px;
    }

    .container {
    background: linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%);
    transform: scale(.9);
    width: 1200px;
    position: absolute;
    height: 210px;
    left: 50%;
    top: 50%;
    margin: -65px -600px;
    }