Non-ducky Circular Thing

dabblet.css

/**
 * Non-ducky Circular Thing
 */

/**
 * Duck.
 */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media(min-width: 400px) {
    header {
        min-height: 200px;
        padding-left: 200px;
    }

    .duck {
        position: absolute;
        display: inline-block;

        left: 0;

        width: 100%;
        height: 200px;
    }

    header/*:hover*/ .duck,
    header.animated .duck {
        animation-duration: 10s;
        animation-name: duck-walk-body;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .duck .bill {
        position: absolute;
        top: 83px;
        left: 116px;
        background-color: yellow;
        width: 20px;
        height: 10px;
        border: 3px solid orange;
        border-left: none;

        border-radius: 3px;
    }

    .duck .head {
        position: absolute;
        top: 54px;
        left: 80px;
        background-color: #B68E6A;
        width: 40px;
        height: 40px;
        border: 4px solid black;
        border-bottom-color: transparent;
        z-index: 3;

        border-radius: 20px 30px 0 0;
    }

    .duck .head:after {
        display: block;
        content: '';
        position: absolute;
        top: 7px;
        left: 18px;
        background-color: black;
        width: 7px;
        height: 7px;

        border: 0px solid #B68E6A;
        box-shadow: 0 0 0 1px black;

        border-radius: 1em;
    }

    .duck .head:after {
        animation-duration: 4s;
        animation-name: blink;
        animation-iteration-count: infinite;
    }

    .duck .body {
        position: absolute;
        top: 90px;
        left: 50px;
        background-color: #965333;
        width: 70px;
        height: 40px;
        border: 4px solid black;

        border-radius: 1em 0 3em 4em;
    }

    .duck .leg,
    .duck .leg:after {
        position: absolute;
        top: 120px;
        background-color: orange;
        height: 20px;
        width: 4px;
    }

    .duck .leg:after {
        display: block;
        content: '';
        top: 20px;
        left: -8px;
        height: 4px;
        width: 20px;

        border-radius: 1em;
    }

    .duck .left.leg {
        left: 70px;
    }

    .duck .right.leg {
        left: 95px;
    }

    header:hover .duck .right.leg,
    header.animated .duck .right.leg {
        animation-duration: 0.5s;
        animation-name: duck-walk-right-leg;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

@keyframes blink {
    50%  { border-top-width: 0;   border-bottom-width: 0;   }
    55%  { border-top-width: 4px; border-bottom-width: 4px; }
    60%  { border-top-width: 0;   border-bottom-width: 0;   }
}

@keyframes duck-walk-body {
	0% { -webkit-transform: rotateY(-90deg); }
	25% { -webkit-transform: rotateY(0) scale(0.5); }
	50% { left: calc(100% - 1ch); }
	75% { -webkit-transform: rotateY(180deg) scale(1.5); }
	100% { -webkit-transform: rotateY(270deg); }
}

@keyframes duck-walk-left-leg {
    0%   { transform: rotate(0deg);   }
    50%  { transform: rotate(-20deg); }
}

@keyframes duck-walk-right-leg {
    0%   { transform: rotate(0deg);   }
    50%  { transform: rotate(-20deg); }
}


.arrow:before {
	content: '→';
	-webkit-animation: around 5s infinite ease-in-out;
	position: absolute;
	left: 0;
	font-family: monospace;
	font-size: 50px;
}

dabblet.html

<header>
<div class="duck">
	<div class="left  leg"></div>
   	<div class="right leg"></div>
    <div class="head"></div>
    <div class="bill"></div>
	<div class="body"></div>
</div>
</header>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}