LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
    font-size: 10px;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10em;
    height: 10em;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-animation: chameleon .5s linear infinite;
            animation: chameleon .5s linear infinite;
    background-image: -webkit-linear-gradient(white, white);
    background-image: linear-gradient(white, white);
    box-shadow: 0 0 .5em 0 rgba(0, 0, 0, .6);
    cursor: pointer;
}
    .box::after {
        content: '( ͡°‿ʖ ͡°)';
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        font: 1.2em/1.4 'Arial, Helvetica, sans-serif';
        text-shadow: 1px 1px 0 rgba(255, 255, 255, .6);
    }
    .box:hover {
        -webkit-animation-play-state: paused;
                animation-play-state: paused;
        background-image: none;
    }
    .box:hover::after {
        content: '(͡°_ʖ ͡°)';
    }
@-webkit-keyframes chameleon {
    0%, 100% {
        background-color: #f00;
    }
    17% {
        background-color: #ff0;
    }
    33% {
        background-color: #0f0;
    }
    50% {
        background-color: #0ff;
    }
    67% {
        background-color: #00f;
    }
    83% {
        background-color: #f0f;
    }
}
@keyframes chameleon {
    0%, 100% {
        background-color: #f00;
    }
    17% {
        background-color: #ff0;
    }
    33% {
        background-color: #0f0;
    }
    50% {
        background-color: #0ff;
    }
    67% {
        background-color: #00f;
    }
    83% {
        background-color: #f0f;
    }
}

Description

The box gets pseudo-random background color on hover.
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv