Skip to content

Instantly share code, notes, and snippets.

@dongyuwei

dongyuwei/Animated Weather Icons.markdown

Forked from anonymous/Animated Weather Icons.markdown
Last active March 20, 2017 15:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dongyuwei/abe95b378ce07d2507c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dongyuwei/abe95b378ce07d2507c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 17, 2015.
    7 changes: 7 additions & 0 deletions Animated Weather Icons.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Animated Weather Icons
    ----------------------
    Based on dribbble shot https://dribbble.com/shots/2097042-Widget-Weather by kylor

    A [Pen](http://codepen.io/joshbader/pen/EjXgqr) by [Josh Bader](http://codepen.io/joshbader) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/joshbader/pen/EjXgqr/license).
    43 changes: 43 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    <h1>Animated Weather Icons</h1>

    <div class="icon sun-shower">
    <div class="cloud"></div>
    <div class="sun">
    <div class="rays"></div>
    </div>
    <div class="rain"></div>
    </div>

    <div class="icon thunder-storm">
    <div class="cloud"></div>
    <div class="lightning">
    <div class="bolt"></div>
    <div class="bolt"></div>
    </div>
    </div>

    <div class="icon cloudy">
    <div class="cloud"></div>
    <div class="cloud"></div>
    </div>

    <div class="icon flurries">
    <div class="cloud"></div>
    <div class="snow">
    <div class="flake"></div>
    <div class="flake"></div>
    </div>
    </div>

    <div class="icon sunny">
    <div class="sun">
    <div class="rays"></div>
    </div>
    </div>

    <div class="icon rainy">
    <div class="cloud"></div>
    <div class="rain"></div>
    </div>

    <p>Based on <a href="https://dribbble.com/shots/2097042-Widget-Weather" target="_blank">Dribbble</a> by kylor</p>
    1 change: 1 addition & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // Based on dribbble shot https://dribbble.com/shots/2097042-Widget-Weather by kylor
    306 changes: 306 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,306 @@
    html { box-sizing: border-box; }
    html *,
    html *:before,
    html *:after { box-sizing: inherit; }

    body {
    max-width: 42rem;
    padding: 2rem;
    margin: 0 auto;
    color: #161616;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: currentColor;
    }

    h1 {
    margin-bottom: 1.375rem;
    color: #fff;
    font-weight: 100;
    font-size: 2rem;
    text-transform: uppercase;
    }
    p,
    a {
    color: rgba(255,255,255,0.3);
    font-size: small;
    }

    .icon {
    position: relative;
    display: inline-block;
    width: 12rem;
    height: 10rem;
    }

    .cloud {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 3.6875rem;
    height: 3.6875rem;
    margin: -1.84375rem;
    background: currentColor;
    border-radius: 50%;
    box-shadow:
    -2.1875rem 0.6875rem 0 -0.6875rem,
    2.0625rem 0.9375rem 0 -0.9375rem,
    0 0 0 0.375rem #fff,
    -2.1875rem 0.6875rem 0 -0.3125rem #fff,
    2.0625rem 0.9375rem 0 -0.5625rem #fff;
    }
    .cloud:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.5rem;
    display: block;
    width: 4.5625rem;
    height: 1rem;
    background: currentColor;
    box-shadow: 0 0.375rem #fff;
    }
    .cloud:nth-child(2) {
    z-index: 0;
    background: #fff;
    box-shadow:
    -2.1875rem 0.6875rem 0 -0.6875rem #fff,
    2.0625rem 0.9375rem 0 -0.9375rem #fff,
    0 0 0 0.375rem #fff,
    -2.1875rem 0.6875rem 0 -0.3125rem #fff,
    2.0625rem 0.9375rem 0 -0.5625rem #fff;
    opacity: 0.3;
    transform: scale(0.5) translate(6rem, -3rem);
    animation: cloud 4s linear infinite;
    }
    .cloud:nth-child(2):after { background: #fff; }

    .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 0.375rem #fff;
    animation: spin 12s infinite linear;
    }
    .rays {
    position: absolute;
    top: -2rem;
    left: 50%;
    display: block;
    width: 0.375rem;
    height: 1.125rem;
    margin-left: -0.1875rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 5.375rem #fff;
    }
    .rays:before,
    .rays:after {
    content: '';
    position: absolute;
    top: 0rem;
    left: 0rem;
    display: block;
    width: 0.375rem;
    height: 1.125rem;
    transform: rotate(60deg);
    transform-origin: 50% 3.25rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 5.375rem #fff;
    }
    .rays:before {
    transform: rotate(120deg);
    }
    .cloud + .sun {
    margin: -2rem 1rem;
    }

    .rain,
    .lightning,
    .snow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0.375rem 0 0 -2rem;
    background: currentColor;
    }

    .rain:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1.125rem;
    height: 1.125rem;
    margin: -1rem 0 0 -0.25rem;
    background: #0cf;
    border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
    box-shadow:
    0.625rem 0.875rem 0 -0.125rem rgba(255,255,255,0.2),
    -0.875rem 1.125rem 0 -0.125rem rgba(255,255,255,0.2),
    -1.375rem -0.125rem 0 rgba(255,255,255,0.2);
    transform: rotate(-28deg);
    animation: rain 3s linear infinite;
    }

    .bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 0.5rem;
    margin: -0.875rem 0 0 -0.5rem;
    color: #fff;
    background: #fff;
    opacity: 0.3;
    animation: lightning 2s linear infinite;
    }
    .bolt:nth-child(2) {
    width: 0.5rem;
    height: 0.25rem;
    margin: -1.875rem 0 0 -1.5rem;
    transform: translate(2.5rem, 2.25rem);
    opacity: 0.2;
    animation: lightning 1.5s linear infinite;
    }
    .bolt:before,
    .bolt:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: -1.75rem 0 0 -1.25rem;
    border-top: 1.25rem solid transparent;
    border-right: 0.75rem solid;
    border-bottom: 0.75rem solid;
    border-left: 0.5rem solid transparent;
    transform: skewX(-10deg);
    }
    .bolt:after {
    margin: -0.25rem 0 0 -0.0125rem;
    border-top: 0.75rem solid;
    border-right: 0.5rem solid transparent;
    border-bottom: 1.25rem solid transparent;
    border-left: 0.75rem solid;
    transform: skewX(-10deg);
    }
    .bolt:nth-child(2):before {
    margin: -0.875rem 0 0 -0.75rem;
    border-top: 0.625rem solid transparent;
    border-right: 0.375rem solid;
    border-bottom: 0.375rem solid;
    border-left: 0.25rem solid transparent;
    }
    .bolt:nth-child(2):after {
    margin: -0.125rem 0 0 0;
    border-top: 0.375rem solid;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.625rem solid transparent;
    border-left: 0.375rem solid;
    }

    .flake:before,
    .flake:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.25rem 0 0 -1.25rem;
    content: '\2744';
    color: #fff;
    list-height: 1em;
    opacity: 0.2;
    animation: spin 8s linear infinite reverse;
    }
    .flake:after {
    margin: -0.125rem 0 0 -1.375rem;
    font-size: 1.5rem;
    opacity: 0.4;
    animation: spin 14s linear infinite;
    }
    .flake:nth-child(2):before {
    margin: -0.875rem 0 0 0.25rem;
    font-size: 1.25rem;
    opacity: 0.2;
    animation: spin 10s linear infinite;
    }
    .flake:nth-child(2):after {
    margin: 0.5rem 0 0 0.125rem;
    font-size: 2rem;
    opacity: 0.4;
    animation: spin 16s linear infinite reverse;
    }


    /* Animations */

    @keyframes spin {
    100% { transform: rotate(360deg); }
    }

    @keyframes cloud {
    0% { opacity: 0; }
    50% { opacity: 0.3; }
    100% {
    opacity: 0;
    transform: scale(0.5) translate(-6rem, -3rem);
    }
    }

    @keyframes rain {
    0% {
    background: #0cf;
    box-shadow:
    0.625rem 0.875rem 0 -0.125rem rgba(255,255,255,0.2),
    -0.875rem 1.125rem 0 -0.125rem rgba(255,255,255,0.2),
    -1.375rem -0.125rem 0 #0cf;
    }
    25% {
    box-shadow:
    0.625rem 0.875rem 0 -0.125rem rgba(255,255,255,0.2),
    -0.875rem 1.125rem 0 -0.125rem #0cf,
    -1.375rem -0.125rem 0 rgba(255,255,255,0.2);
    }
    50% {
    background: rgba(255,255,255,0.3);
    box-shadow:
    0.625rem 0.875rem 0 -0.125rem #0cf,
    -0.875rem 1.125rem 0 -0.125rem rgba(255,255,255,0.2),
    -1.375rem -0.125rem 0 rgba(255,255,255,0.2);
    }
    100% {
    box-shadow:
    0.625rem 0.875rem 0 -0.125rem rgba(255,255,255,0.2),
    -0.875rem 1.125rem 0 -0.125rem rgba(255,255,255,0.2),
    -1.375rem -0.125rem 0 #0cf;
    }
    }

    @keyframes lightning {
    45% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
    }
    50% {
    color: #0cf;
    background: #0cf;
    opacity: 1;
    }
    55% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
    }
    }