Skip to content

Instantly share code, notes, and snippets.

@zorbash

zorbash/dabblet.css

Forked from LeaVerou/dabblet.css
Created February 17, 2012 15:58
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. @LeaVerou LeaVerou revised this gist Feb 8, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"separate","prefixfree":"1","page":"css"}
    {"view":"separate","prefixfree":"1","page":"result"}
  2. @LeaVerou LeaVerou revised this gist Feb 8, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}
    {"view":"separate","prefixfree":"1","page":"css"}
  3. @LeaVerou LeaVerou revised this gist Feb 8, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * Move in a circle without wrapper elements
    * Idea by Aryeh Gregor, simplified by Lea Verou
    */

    @keyframes rot {
  4. @LeaVerou LeaVerou created this gist Feb 7, 2012.
    29 changes: 29 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /**
    * Move in a circle without wrapper elements
    */

    @keyframes rot {
    from {
    transform: rotate(0deg)
    translate(-150px)
    rotate(0deg);
    }
    to {
    transform: rotate(360deg)
    translate(-150px)
    rotate(-360deg);
    }
    }

    .smile {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin: -20px;
    font-size: 100px;
    animation: 3s rot infinite linear;
    }


    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="smile">☺</div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}