A Pen by mzhou.

A-Pen-by-mzhou.markdown

A Pen by mzhou

A Pen by mzhou on CodePen.

License.

index.html

    <span class="stopwatch bounceInDown">
        <span class="watch-tp"></span>
        <span class="watch-hd"></span>
        <span class="watch-ft"></span>
        <span class="watch-back"></span>
        <span class="watch-fore"></span>
        <span class="watch-point"></span>
    </span>

script.js

setTimeout(function() {
  $('.stopwatch').addClass('watch-done');
}, 3000);

style.less

.watch(
    @font-size: 1em,
    @hour: 0,
    @watch-color: #5cb5ce,
    @point-color: #FFF,
    @border-color: #FFF) {

    @lighten-watch-color: lighten(@watch-color, 5%);

    position: relative;
    width: 1em;
    height: 1em;
    font-size: @font-size;

    /* Point */
    .watch-point {
        content: '';
        position: absolute;
        z-index: 6;
        top: 0.5em;
        left: 0.5em;
        margin-top: -0.04em;
        width: 0.45em;
        height: 0.08em;
        font-size: inherit;
        background-color: @point-color;
        border-radius: 0.5em;
        @deg: 1deg * (@hour - 3) * 360 / 12;
        -webkit-transform: rotate(@deg);
        -webkit-transform-origin: 0% 50%;
        -moz-transform: rotate(@deg);
        -moz-transform-origin: 0% 50%;
        -ms-transform: rotate(@deg);
        -ms-transform-origin: 0% 50%;
        -o-transform: rotate(@deg);
        -o-transform-origin: 0% 50%;
        transform: rotate(@deg);
        transform-origin: 0% 50%;
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }

    /* circle */
    &:before {
        content: '';
        position: absolute;
        z-index: 6;
        top: 0.4em;
        left: 0.4em;
        width: 0.2em;
        height: 0.2em;
        border-radius: 0.2em;
        background-color: @point-color;
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }

    @tick-thickness: 0.1em;
    &.watch-done:before {
        z-index: 6;
        top: 0.6em;
        left: 0.5em - 0.25em;
        margin-left: -0.05em;
        width: 0.25em;
        height: @tick-thickness;
        border-radius: 0.3em 0 0 0.3em;
        @deg: 45deg;
        -webkit-transform: rotate(@deg);
        -webkit-transform-origin: 100% 50%;
        -moz-transform: rotate(@deg);
        -moz-transform-origin: 100% 50%;
        -ms-transform: rotate(@deg);
        -ms-transform-origin: 100% 50%;
        -o-transform: rotate(@deg);
        -o-transform-origin: 100% 50%;
        transform: rotate(@deg);
        transform-origin: 100% 50%;
    }
    &.watch-done:after {
        content: '';
        position: absolute;
        z-index: 6;
        top: 0.5em + 0.1em;
        left: 0.5em - 0.05em;
        margin-left: -0.05em;
        width: 0.1em;
        height: @tick-thickness;
        border-radius: 0.3em;
        background-color: @point-color;
    }
    &.watch-done .watch-point {
        z-index: 6;
        top: 0.6em;
        margin-top: 0;
        margin-left: -0.05em;
        width: 0.5em;
        height: @tick-thickness;
        border-radius: 0 0.3em 0.3em 0;
        -webkit-animation-name: none;
        animation-name: none;
        @deg: -45deg;
        -webkit-transform: rotate(@deg);
        -webkit-transform-origin: 0% 50%;
        -moz-transform: rotate(@deg);
        -moz-transform-origin: 0% 50%;
        -ms-transform: rotate(@deg);
        -ms-transform-origin: 0% 50%;
        -o-transform: rotate(@deg);
        -o-transform-origin: 0% 50%;
        transform: rotate(@deg);
        transform-origin: 0% 50%;
    }

    .watch-tp {
        content: '';
        position: absolute;
        z-index: 3;
        top: -0.06em;
        left: 50%;
        margin-left: -0.075em;
        width: 0.15em;
        height: 0.2em;
        border-radius: 0.2em;
        background-color: @watch-color;
    }

    .watch-hd {
        &:before,
        &:after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            font-size: inherit;
            width: 0.4em;
            height: 0.4em;
            background: @watch-color;
            border-radius: 0.4em;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }
    }

    .watch-ft {
        &:before,
        &:after {
            content: '';
            position: absolute;
            z-index: 4;
            bottom: 0.1em;
            font-size: inherit;
            width: 0.15em;
            height: 0.3em;
            background: @watch-color;
            border-radius: 0.4em;
        }

        &:before {
            left: 0;
            -webkit-transform: rotate(45deg);
            -webkit-transform-origin: left bottom;
            -moz-transform: rotate(45deg);
            -moz-transform-origin: left bottom;
            -ms-transform: rotate(45deg);
            -ms-transform-origin: left bottom;
            -o-transform: rotate(45deg);
            -o-transform-origin: left bottom;
            transform: rotate(45deg);
            transform-origin: left bottom;
        }

        &:after {
            right: 0;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: right bottom;
            -moz-transform: rotate(-45deg);
            -moz-transform-origin: right bottom;
            -ms-transform: rotate(-45deg);
            -ms-transform-origin: right bottom;
            -o-transform: rotate(-45deg);
            -o-transform-origin: right bottom;
            transform: rotate(-45deg);
            transform-origin: right bottom;
        }
    }

    .watch-back {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 1em;
        height: 1em;
        font-size: inherit;
        border-radius: 0.5em;
        background-color: @border-color;
    }

    .watch-fore {
        position: absolute;
        top: 1em / 32;
        left: 1em / 32;
        z-index: 4;
        width: 15em / 16;
        height: 15em / 16;
        font-size: inherit;
        border-radius: 0.5em;
        background-color: @watch-color;
        // background-image: linear-gradient(135deg, @watch-color 0%, @lighten-watch-color 70%, @watch-color 90%);
        background-image: radial-gradient(circle, @lighten-watch-color 35%, @watch-color 70%);

    }
}

.stopwatch(
    @font-size: 1em,
    @duration: 2,
    @watch-color: #5cb5ce,
    @point-color: #FFF,
    @border-color: #FFF) {

    .watch(@font-size, 3, @watch-color, @point-color, @border-color);


    .watch-point {
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 0;
        -webkit-animation-duration: @duration * 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: stopwatch-rotate;
        animation-timing-function: linear;
        animation-delay: 0;
        animation-duration: @duration * 1s;
        animation-iteration-count: infinite;
        animation-name: stopwatch-rotate;
    }
}

@-webkit-keyframes stopwatch-rotate {
    0% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
@keyframes stopwatch-rotate {
    0% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(-2000px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(-2000px);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(-2000px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(-2000px);
    }
}

.stopwatch {
    .stopwatch(3em);
    position: absolute;
    top: 100px;
    left: 100px;
}

.bounceInDown {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
    animation-name: bounceInDown;
}