可爱的猫和鼠标卡通动画

小黑猫在玩弄鼠标

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2072
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.contenedor {
    position: relative;
    width: 100%;
    margin: 90px auto;
}
.dibujo {
    position: relative;
    display: block;
    width: 100%;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
}
.raton99 {
    position: relative;
    width: 97px;
    height: 50px;
    border-radius: 100px 100px 0 0;
    background: gray;
    margin: 172px auto;
}
.raton99::before {
    content: "";
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100px 0 100px 100px;
    background: #333;
    border: 3px solid gray;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    margin: -21px 7px;
    top: -17px;
}
.raton99::after {
    content: "S";
    display: block;
    font-family: Verdana;
    color: gray;
    font-size: 3em;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin: 43px -55px;
}
.ojos99 {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: white;
    margin: -14px 65px;
}
.ojito99 {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: black;
    margin: 0px 7px;
    animation: uyuy 30s linear infinite;
    -moz-animation: uyuy 30s linear infinite;
    -webkit-animation: uyuy 30s linear infinite;
}
.slide0 {
    position: relative;
    margin: 0 auto;
    z-index: 1;
    background: white;
    width: 100%;
    height: 450px;
    display: none;
}
.slide1 {
    position: relative;
    margin: 0 auto;
    z-index: 2;
    background: white;
    width: 100%;
    height: 450px;
    display: none;
}
.slide2 {
    position: relative;
    margin: 0 auto;
    z-index: 3;
    background: white;
    width: 100%;
    height: 450px;
    display: none;
}
.slide3 {
    position: relative;
    margin: 0 auto;
    z-index: 4;
    background: white;
    width: 100%;
    height: 450px;
    display: none;
}
input[type=radio]:checked ~ .check .inside {
    display: inline-block;
    position: relative;
    background: #0DFF92;
    border-radius: 100%;
    height: 70%;
    width: 70%;
    top: 12%;
    margin: auto;
}
input[type=radio] {
    display: none;
}
input[type=radio]:checked ~ .slide0 {
    display: block;
}
input[type=radio]:checked ~ .slide1 {
    display: block;
}
input[type=radio]:checked ~ .slide2 {
    display: block;
}
input[type=radio]:checked ~ .slide3 {
    display: block;
}
h1 {
    font-size: 2.1em;
    font-family: Calibri;
}
.btn0 {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    z-index: 9;
    background: #ccc;
    cursor: pointer;
    -webkit-transition: all 30s ease-out;
    transition: all 30s ease-out;
}
h1,
h2.sls0 {
    color: #333;
    text-align: center;
    font-family: Verdana;
    font-size: 2.1em;
    font-weight: 700;
    top: -3px;
}
h3.sls0 {
    font-family: Verdana;
    color: #212121;
    margin-top: 53px;
    font-weight: 700;
}
h3.click {
    font-family: Verdana;
    font-size: 1.2em;
    color: #212121;
    margin-top: 53px;
    font-weight: 700;
    text-align: center;
}
.btn1 {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    z-index: 9;
    background: cyan;
    margin: -450px auto;
    cursor: pointer;
    -webkit-transition: all 30s ease-out;
    transition: all 30s ease-out;
}
.btn2 {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    z-index: 9;
    background: pink;
    cursor: pointer;
    margin: -450px auto;
    -webkit-transition: all 3s ease-out;
    transition: all 3s ease-out;
}
.btn3 {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    z-index: 9;
    background: gray;
    cursor: pointer;
    margin: -450px auto;
    -webkit-transition: all 3s ease-out;
    transition: all 3s ease-out;
}
.table {
    width: 330px;
    height: 21px;
    top: 195px;
    background: #121212;
    margin: 0px auto;
    display: block;
    position: relative;
}
.compu {
    width: 162px;
    height: 112px;
    border-radius: 9px;
    background: #01b5e2;
    border: 6px solid #212121;
    margin: 0px auto;
    display: block;
    position: relative;
    top: 41px;
}
.compu::before {
    content: "";
    display: block;
    position: relative;
    width: 175px;
    height: 9px;
    border-radius: 0 0 30px 30px;
    background: #333;
    top: 118px;
    left: -7px;
}
.cat {
    position: relative;
    display: block;
    width: 231px;
    height: 231px;
    margin: 0px auto;
    top: -43px;
    animation: correr 21s alternate infinite;
    -moz-animation: correr 21s alternate infinite;
    -webkit-animation: correr 21s alternate infinite;
}
.cuerpo {
    position: relative;
    display: block;
    width: 65px;
    height: 80px;
    border-radius: 100%;
    background: black;
    margin: 0px auto;
    top: 143px;
}
.cuerpo::before {
    content: "";
    display: block;
    position: relative;
    border-top: 30px solid black;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 40px;
    margin: 0px auto;
    top: -23px;
}
.cuerpo::after {
    content: "";
    display: block;
    position: relative;
    border-bottom: 30px solid black;
    border-left: 12px solid transparent;
    border-right: 11px solid transparent;
    height: 0;
    width: 35px;
    margin: 0 auto;
    top: -37px;
    left: 0px;
}
.leg {
    position: relative;
    width: 21px;
    height: 80px;
    background: black;
    border-radius: 30px;
    margin: 0 auto;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    top: -21px;
    left: -35px;
}
.leg::before {
    content: "";
    display: block;
    position: relative;
    width: 21px;
    height: 80px;
    background: black;
    border-radius: 30px;
    margin: 0 auto;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    top: 34px;
    left: 63px;
}
.cabeza {
    position: relative;
    display: block;
    width: 43px;
    height: 30px;
    border-radius: 30px 30px 0 0;
    background: gray;
    margin: 0 auto;
    top: -92px;
    left: 0;
}
.cabeza::after {
    content: "";
    position: relative;
    display: block;
    width: 12px;
    height: 5px;
    border-radius: 100%;
    background: white;
    margin: 0 auto;
    top: -63px;
}
.cabeza::before {
    content: "";
    position: relative;
    display: block;
    width: 77px;
    height: 63px;
    border-radius: 100%;
    background: #212121;
    margin: 0 auto;
    top: 6px;
    left: -17px;
}
.ojos9 {
    position: relative;
    width: 21px;
    height: 21px;
    background: lightgreen;
    border-radius: 300px 3px 300px 300px;
    margin: 0 auto;
    top: -99px;
    left: -16px;
}
.ojos9::before {
    content: "";
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
    background: lightgreen;
    border-radius: 3px 300px 300px 300px;
    margin: 0 auto;
    left: 33px;
}
.iris9 {
    position: relative;
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 300px 0px 300px 0;
    margin: 0 auto;
    top: -21px;
    left: 5px;
}
.iris9::before {
    content: "";
    display: block;
    position: relative;
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 0px 300px 0px 300px;
    margin: 0 auto;
    left: 24px;
}
.orejas {
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 21px solid #212121;
    border-right: 21px solid transparent;
    margin: 0 auto;
    top: -97px;
    left: -26px;
}
.orejas::before {
    content: "";
    display: block;
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 21px solid #212121;
    border-left: 21px solid transparent;
    margin: 0 auto;
    left: 54px;
}
.orejitas {
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 7px solid gray;
    border-right: 7px solid transparent;
    margin: 0 auto;
    top: -11px;
    left: 3px;
}
.orejitas::before {
    content: "";
    display: block;
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 7px solid gray;
    border-left: 7px solid transparent;
    margin: 0 auto;
    left: 62px;
}
.cola {
    position: relative;
    width: 21px;
    height: 60px;
    border-radius: 30px;
    background: black;
    margin: 0 auto;
    top: -70px;
    left: 0px;
    animation: col 1s alternate infinite;
    -moz-animation: col 1s alternate infinite;
    -webkit-animation: col 1s alternate infinite;
    -o-animation: col 1s alternate infinite;
}
.leg3 {
    position: relative;
    width: 21px;
    height: 55px;
    border-radius: 21px;
    background: black;
    margin: 0 auto;
    top: -57px;
    left: -30px;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    animation: subir 3s alternate infinite;
    -moz-animation: subir 3s alternate infinite;
    -webkit-animation: subir 3s alternate infinite;
    -o-animation: subir 3s alternate infinite;
}
.leg3::before {
    content: "";
    display: block;
    position: relative;
    width: 21px;
    height: 55px;
    border-radius: 21px;
    background: black;
    margin: 0 auto;
    top: 9px;
    left: 70px;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.legs {
    position: relative;
    width: 21px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    margin: -271px -0px;
    background: gray;
    margin: 0 auto;
    top: -80px;
    left: 0px;
}
.legs::before {
    content: "";
    display: block;
    position: relative;
    width: 21px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    margin: 0 auto;
    top: 51px;
    left: 92px;
    background: gray;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.legs3 {
    position: relative;
    width: 21px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    margin: 0 auto;
    top: -55px;
    left: 0px;
    background: gray;
}
.legs3::before {
    content: "";
    display: block;
    position: relative;
    width: 21px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    margin: 0 auto;
    top: 19px;
    left: 89px;
    background: gray;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.bigotes {
    position: relative;
    width: 55px;
    height: 2px;
    background: gray;
    margin: 0 auto;
    top: -278px;
    left: 0px;
}
.bigotes::after {
    content: "";
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    background: gray;
    margin: 0 auto;
    top: -2px;
    left: -2px;
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
}
.bigotes::before {
    content: "";
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    background: gray;
    margin: 0 auto;
    top: 0px;
    left: 4px;
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
}
.raton {
    position: relative;
    width: 43px;
    height: 18px;
    border-radius: 90px 90px 0 0;
    background: #212121;
    border: 3px solid #333;
    margin: 0 auto;
    top: 26px;
    left: 121px;
    -webkit-animation: shake 0.9s alternate infinite;
    animation: shake 0.9s alternate infinite;
}
.raton::before {
    content: "";
    display: block;
    position: relative;
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 100%;
    border: 5px solid #edeeee;
    margin: 0 auto;
    top: -9px;
    left: 12px;
}
.raton::after {
    content: "";
    display: block;
    position: relative;
    width: 30px;
    height: 3px;
    background: #333;
    margin: 0 auto;
    top: -9px;
    left: -34px;
}
@keyframes correr {
    0% {
        left: 0px;
    }
    25% {
        left: 21px;
    }
    50% {
        left: 33px;
    }
    55% {
        left: 53px;
    }
    65% {
        left: 63px;
    }
    75% {
        left: 77px;
    }
    80% {
        left: 87px;
    }
    85% {
        left: 93px;
    }
    95% {
        left: 93px;
        top: -50px;
    }
    90% {
        left: 93px;
        top: -45px;
    }
    95% {
        left: 93px;
        top: -40px;
    }
    100% {
        left: 93px;
        top: -40px;
    }
}
@-webkit-keyframes correr {
    0% {
        left: 0px;
    }
    25% {
        left: 21px;
    }
    50% {
        left: 33px;
    }
    55% {
        left: 53px;
    }
    65% {
        left: 63px;
    }
    75% {
        left: 77px;
    }
    80% {
        left: 87px;
    }
    85% {
        left: 93px;
    }
    95% {
        left: 93px;
        top: -50px;
    }
    90% {
        left: 93px;
        top: -45px;
    }
    95% {
        left: 93px;
        top: -40px;
    }
    100% {
        left: 93px;
        top: -40px;
    }
}
@keyframes subir {
    0% {
        top: -57px;
    }
    25% {
        top: -53px;
    }
    50% {
        top: -57px;
    }
    60% {
        top: -53px;
    }
    75% {
        top: -59px;
    }
    95% {
        top: -53px;
    }
    100% {
        top: -57px;
    }
}
@-webkit-keyframes subir {
    0% {
        top: -57px;
    }
    25% {
        top: -53px;
    }
    50% {
        top: -57px;
    }
    60% {
        top: -53px;
    }
    75% {
        top: -59px;
    }
    95% {
        top: -53px;
    }
    100% {
        top: -57px;
    }
}
@keyframes col {
    0% {
        left: 0px;
    }
    25% {
        left: -3px;
    }
    50% {
        left: 3px;
    }
    100% {
        left: 0px;
    }
}
@-webkit-keyframes col {
    0% {
        left: 0px;
    }
    25% {
        left: -3px;
    }
    50% {
        left: 3px;
    }
    100% {
        left: 0px;
    }
}
@keyframes shake {
    0% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    20% {
        transform: translatex(1px);
        -webkit-transform: translatex(1px);
        -moz-transform: translatex(1px);
    }
    40% {
        transform: translatex(-1px);
        -webkit-transform: translatex(-1px);
        -moz-transform: translatex(-1px);
    }
    51% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    70% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    90% {
        transform: translatex(-1px);
        -webkit-transform: translatex(-1px);
        -moz-transform: translatex(-1px);
    }
    100% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
}
@-webkit-keyframes shake {
    0% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    20% {
        transform: translatex(1px);
        -webkit-transform: translatex(1px);
        -moz-transform: translatex(1px);
    }
    40% {
        transform: translatex(-1px);
        -webkit-transform: translatex(-1px);
        -moz-transform: translatex(-1px);
    }
    51% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    70% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
    90% {
        transform: translatex(-1px);
        -webkit-transform: translatex(-1px);
        -moz-transform: translatex(-1px);
    }
    100% {
        transform: translatex(0px);
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
    }
}
.table3 {
    width: 330px;
    height: 21px;
    top: 245px;
    background: black;
    margin: 0px auto;
    display: block;
    position: relative;
}
.compu3 {
    width: 172px;
    height: 99px;
    border-radius: 9px;
    background: #ff8989;
    border: 7px solid #333;
    margin: 0px auto;
    display: block;
    position: relative;
    top: 97px;
}
.compu3::before {
    content: "";
    display: block;
    position: relative;
    border-bottom: 17px solid #212121;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 30px;
    top: 105px;
    left: 61px;
}
.cat3 {
    position: relative;
    width: 90px;
    height: 45px;
    border-radius: 90px 90px 0px 0;
    -moz-border-radius: 90px 90px 0 0;
    background: #121212;
    margin: 0px auto;
    top: 132px;
    left: -12px;
}
.cat3::before {
    content: "";
    position: relative;
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 60px solid #121212;
    margin: 0px auto;
    -webkit-transform: rotate(21deg);
    transform: rotate(21deg);
    top: -21px;
    left: 44px;
}
.cat3::after {
    content: "";
    display: block;
    position: relative;
    width: 50px;
    height: 40px;
    border-radius: 100%;
    background: #121212;
    margin: 0px auto;
    top: -132px;
    left: 52px;
}
.ojos7 {
    position: relative;
    width: 21px;
    height: 16px;
    border-radius: 3px 500px 251px 800px;
    background: white;
    margin: 0px auto;
    top: -81px;
    left: 56px;
    transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    z-index: 3;
}
.ojos7::before {
    content: "";
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #006e4e;
    margin: 0px auto;
    top: 4px;
    left: 5px;
}
.ojos7::after {
    content: "";
    position: relative;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: white;
    margin: 0px auto;
    top: -2px;
    left: 7px;
}
.orejas3 {
    position: relative;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-left: 19px solid #212121;
    border-bottom: 12px solid transparent;
    margin: 0px auto;
    top: -116px;
    left: 37px;
}
.orejas3::before {
    content: "";
    position: relative;
    display: block;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-left: 12px solid #ccc;
    border-bottom: 9px solid transparent;
    margin: 0px auto;
    top: -7px;
    left: -16px;
}
.orejas3::after {
    content: "";
    position: relative;
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid #333;
    border-bottom: 9px solid transparent;
    margin: 0px auto;
    top: -6px;
    left: 27px;
}
.cola3 {
    position: relative;
    width: 17px;
    height: 60px;
    background: #212121;
    margin: 0px auto;
    top: -17px;
    left: -53px;
    border-radius: 6px;
    animation: corre3 1s alternate infinite;
    -moz-animation: corre3 1s alternate infinite;
    -webkit-animation: corre3 1s alternate infinite;
}
.cola3::before {
    content: "";
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    background: #212121;
    margin: 0px auto;
    top: 43px;
    left: -3px;
}
.raton3 {
    position: relative;
    width: 43px;
    height: 21px;
    border-radius: 30px 30px 0 0;
    background: #212121;
    margin: 0px auto;
    top: 32px;
    left: 116px;
    animation: corres 1s alternate infinite;
    -moz-animation: corres 1s alternate infinite;
    -webkit-animation: corres 1s alternate infinite;
}
.raton3::before {
    content: "";
    position: relative;
    display: block;
    width: 25px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    background: #535454;
    margin: 0px auto;
    top: 5px;
    left: 0px;
}
.raton3::after {
    content: "";
    position: relative;
    display: block;
    width: 3px;
    height: 137px;
    background: gray;
    margin: 0px auto;
    top: -138px;
    left: -49px;
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
}
.foot3 {
    position: relative;
    width: 21px;
    height: 9px;
    border-radius: 30px 30px 0 0;
    background: #212121;
    margin: 0px auto;
    top: -104px;
    left: 38px;
}
.eyes {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: white;
    border: 1px solid #333;
    margin: 0px auto;
    top: -12px;
    left: 10px;
}
.eyes::before {
    content: "";
    position: relative;
    margin: 0px auto;
    top: -2px;
    left: -4px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: black;
}
@-webkit-keyframes corres {
    0% {
        left: 116px;
    }
    50% {
        left: 121px;
    }
    100% {
        left: 116px;
    }
}
@keyframes corres {
    0% {
        left: 116px;
    }
    50% {
        left: 121px;
    }
    100% {
        left: 116px;
    }
}
@-moz-webkit-keyframes corres {
    0% {
        left: 116px;
    }
    50% {
        left: 121px;
    }
    100% {
        left: 116px;
    }
}
@-webkit-keyframes corre3 {
    0% {
        left: -50px;
        top: -16px;
    }
    50% {
        left: -53px;
        top: -17px
    }
    100% {
        left: -50px;
        top: -16px
    }
}
@keyframes corre3 {
    0% {
        left: -50px;
        top: -16px;
    }
    50% {
        left: -53px;
        top: -17px
    }
    100% {
        left: -50px;
        top: -16px
    }
}
.estantes {
    position: relative;
    width: 152px;
    height: 21px;
    background: #121212;
    margin: 0px auto;
    top: 263px;
    left: 27px;
}
.estantes::before {
    content: "";
    position: relative;
    display: block;
    width: 152px;
    height: 21px;
    background: #121212;
    margin: 0px auto;
    top: -93px;
    left: 1px;
}
ul.estante {
    position: relative;
    width: 132px;
    height: 90px;
    list-style: none;
    margin: 0px auto;
    top: -184px;
    left: 18px;
}
ul.estante li {
    width: 30px;
    height: 70px;
    background: black;
    display: inline-block;
}
ul.estante li:nth-child(1) {
    background: #55adaf;
}
ul.estante li:nth-child(2) {
    background: #9d404e;
}
ul.estante li:nth-child(3) {
    background: #333;
}
ul.estante li::before {
    content: "";
    display: block;
    width: 21px;
    height: 3px;
    background: white;
    margin: 21px 4px
}
ul.estante li::after {
    content: "";
    display: block;
    width: 21px;
    height: 3px;
    background: white;
    margin: 21px 4px;
}
.cat5 {
    position: relative;
    width: 80px;
    border-radius: 55px 55px 0 0;
    height: 40px;
    background: #212121;
    margin: 0px auto;
    top: 202px;
    left: 33px;
}
.cat5::before {
    content: "";
    position: relative;
    display: block;
    width: 55px;
    height: 43px;
    border-radius: 100%;
    background: #212121;
    border: 1px solid gray;
    margin: 0px auto;
    top: -5px;
    left: -28px;
}
.cat5::after {
    content: "";
    position: relative;
    display: block;
    width: 14px;
    height: 60px;
    border-radius: 30px;
    background: #333;
    margin: 0px auto;
    top: -39px;
    left: 36px;
}
.eyes5 {
    position: relative;
    width: 14px;
    height: 12px;
    border-radius: 100%;
    border-bottom: 3px solid gray;
    margin: 0px auto;
    top: -30px;
    left: -41px;
}
.eyes5::before {
    content: "";
    position: relative;
    display: block;
    width: 14px;
    height: 12px;
    border-radius: 100%;
    border-bottom: 3px solid gray;
    margin: 0px auto;
    top: 0px;
    left: 25px;
}
.eyes5::after {
    content: "";
    position: relative;
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid gray;
    margin: 0px auto;
    top: 4px;
    left: 13px;
}
.orejas5 {
    position: relative;
    width: 0;
    height: 0;
    border-top: 16px solid #212121;
    border-right: 16px solid transparent;
    margin: 0px auto;
    top: -63px;
    left: -49px;
}
.orejas5::before {
    content: "";
    position: relative;
    display: block;
    width: 0;
    width: 0;
    height: 0;
    border-top: 16px solid #212121;
    border-left: 16px solid transparent;
    margin: 0px auto;
    top: -16px;
    left: 41px;
}
.orejas5::after {
    content: "";
    position: relative;
    display: block;
    width: 18px;
    height: 5px;
    border-radius: 9px 9px 0 0;
    background: #333;
    margin: 32px 1px;
    margin: 0px auto;
    top: 6px;
    left: 0px;
}
.raton5 {
    position: relative;
    width: 3px;
    height: 112px;
    background: black;
    margin: 0px auto;
    top: 208px;
    left: -17px;
    animation: uy 1s ease-in-out alternate infinite;
    -moz-animation: uy 1s ease-in-out alternate infinite;
    -webkit-animation: uy 1s ease-in-out alternate infinite;
    -webkit-transform-origin: uy 50% -40px;
    transform-origin: 50% -40px;
}
.raton5::before {
    content: "";
    position: relative;
    display: block;
    width: 12px;
    height: 35px;
    border-radius: 12px 0px 0px 12px;
    background: black;
    margin: 0px auto;
    top: 93px;
    left: -9px;
}
.raton5::after {
    content: "";
    position: relative;
    display: block;
    width: 12px;
    height: 35px;
    border-radius: 0px 12px 12px 0;
    background: #212121;
    margin: 0px auto;
    top: 45px;
    left: 3px;
}
.ojos5 {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: black;
    border: 3px solid #edeeee;
    margin: 0px auto;
    top: 66px;
    left: -11px;
    z-index: 3;
}
.ojos5::before {
    content: "";
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: black;
    border: 3px solid #edeeee;
    margin: 0px auto;
    top: -3px;
    left: 11px;
}
@-webkit-keyframes uy {
    from {
        transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        -moz-transform: rotate(-9deg);
    }
    to {
        transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        -moz-transform: rotate(-9deg);
    }
}
@keyframes uy {
    from {
        transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        -moz-transform: rotate(-9deg);
    }
    to {
        transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        -moz-transform: rotate(9deg);
    }
}

HTML

<h1 class="sls0"><h2 class="sls0">Where is my mouse?</h2><h3 class="click">&nbsp; &nbsp;&nbsp;Click to find it...</h3>
 <div class="raton99"><div class="ojos99"><div class="ojito99"></div></div></div>
 
</div> 
		<input type="radio" id="sl1" name="selector">
    <label for="sl1" class="btn1"></label>       
  <div class="slide1"> 
  
  <div class="table"></div>
  <div class="compu"></div>
   <div class="raton"></div>
  <div class="cat">
    <div class="cuerpo"></div>
    <div class="leg"><div class="legs"></div></div>
    <div class="cabeza"></div>
    <div class="ojos9"><div class="iris9"></div></div>
    <div class="orejas"><div class="orejitas"></div></div>
    <div class="leg3"><div class="legs3"></div></div>
    <div class="cola"></div>
    <div class="bigotes"></div>
	
  
  </div>
  </div>
   <input type="radio" id="sl2" name="selector">
    <label for="sl2" class="btn2"></label>    
  <div class="slide2"><div class="cat3">
    <div class="ojos7"></div>
    <div class="orejas3"></div>
  </div>
  <div class="table3"></div>
  <div class="compu3"></div>
  <div class="cola3"></div>
  <div class="raton3"><div class="eyes"></div></div>
  <div class="foot3"></div>
</div>
  <input type="radio" id="sl3" name="selector">
    <label for="sl3" class="btn3"></label>    
  <div class="slide3"> 
  <div class="estantes">
    <ul class="estante">
      <li></li>
      <li></li>
      <li></li>
      
      </ul> 
	  </div>
  <div class="cat5"><div class="eyes5"></div><div class="orejas5"></div></div>
    <div class="raton5"><div class="ojos5"></div></div>
  </div>
		</section>	
  </div>

小黑猫在玩弄鼠标

编辑器支持Emmet

快捷键

小黑猫在玩弄鼠标

HTML5 Canvas可用鼠标拖拉的火把和烟雾动画

充电电池的卡通肖像动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：