Skip to content

Instantly share code, notes, and snippets.

@peter-mw

peter-mw/index.pug

Created April 3, 2017 16:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peter-mw/bf0df864353905730a10f0838706ea72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peter-mw/bf0df864353905730a10f0838706ea72 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. peter-mw created this gist Apr 3, 2017.
    4 changes: 4 additions & 0 deletions index.pug
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    .mommy
    .daddy
    - for (var x = 1; x < 300; x++)
    span
    10 changes: 10 additions & 0 deletions pure-css-sphere.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    Pure CSS sphere
    ---------------
    Yeah I finally did it ! <br />
    A 100% pure CSS sphere :) <br />
    I'm kinda proud of myself with this pen :3 <br />
    Thanks to @DeptofJeffAyer for helping me with the perspective <o/

    A [Pen](https://codepen.io/Mamboleoo/pen/oxaXdj) by [Louis Hoebregts](http://codepen.io/Mamboleoo) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/Mamboleoo/pen/oxaXdj/license).
    76 changes: 76 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    @import "compass";

    body{
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background:black;
    }

    .mommy{
    width: 500px;
    height: 500px;
    position: relative;
    perspective: 800px;
    }
    .daddy{
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    animation : rotate 25s infinite linear;
    }
    span{
    display: inline-block;
    position: absolute;
    top:50%;
    left:50%;
    perspective: 800px;
    transform-style: preserve-3d;
    width: 0;
    height: 0;
    &:before{
    content:"";
    width: 4px;
    height: 4px;
    display: inline-block;
    position: absolute;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    background: currentColor;
    color: inherit;
    border-radius: 50%;
    animation: invertRotate 25s infinite linear, scale 2s infinite linear;
    box-shadow: 0 0 10px currentColor;
    }
    }

    $amount : 300;
    @for $i from 1 through $amount {

    $theta : ($i / $amount)*120;
    $phi : ($i / $amount) * pi();
    $x : 250 * sin($phi) * cos($theta);
    $y : 250 * sin($phi) * sin($theta);
    $z : 250 * cos($phi);
    .mommy span:nth-child(#{$i}){
    transform: translate3d($x+px, $y+px, $z+px);
    color: hsl(($i/$amount)*360,100%,50%);
    &:before{
    animation-delay: 0s, -($i/$amount)*2+s;
    }
    }
    }

    @keyframes rotate{
    to{transform:rotateY(360deg);}
    }
    @keyframes invertRotate{
    to{transform:rotateY(-360deg);}
    }
    @keyframes scale{
    0%, 45%,55%{ box-shadow: 0 0 10px 0px currentColor;}
    50%{ box-shadow: 0 0 10px 5px currentColor;}
    }