有趣的小猫举手动画

点击小猫，会举手或放在桌面上。

h5, cat

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: "Helvetica Neue";
    font-weight: 300;
    color: #000;
}
a {
    color: #000;
    text-decoration: none;
}
ul {
    list-style: none;
}
li {
    padding: 15px;
}
.container {
    width: 400px;
    margin: 0 auto;
    background: #fff;
}
.cat {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.catHead {
    width: 100px;
    height: 71px;
    background: transparent;
    position: absolute;
    top: 15px;
    left: 150px;
    border-top: 4px solid #222;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-radius: 35% 35% 10px 11px;
    transform: rotate(15deg);
    z-index: 1;
}
.catHead:before {
    content: "";
    display: block;
    width: 30px;
    height: 55px;
    background: transparent;
    position: absolute;
    top: 29px;
    left: 110px;
    border-right: 4px solid #000;
    border-radius: 0 0 50%/50px 20px;
    transform: rotate(-45deg);
}
.catHead:after {
    content: "";
    display: block;
    width: 30px;
    height: 55px;
    background: transparent;
    position: absolute;
    top: 9px;
    right: 95px;
    border-left: 4px solid #000;
    border-radius: 50%/50px 20px 0 0;
    transform: rotate(25deg);
}
/* left ear */

.catEars {
    width: 18px;
    height: 18px;
    background: #fff;
    border-left: 3px solid #000;
    border-top: 4px solid #000;
    transform: rotate(35deg);
    position: absolute;
    left: 150px;
    top: 5px;
    border-radius: 15% 0 0 10%;
    z-index: 2;
}
.catEars:before {
    content: "";
    height: 23px;
    background: #fff;
    border-left: 4px solid #000;
    transform: rotate(35deg);
    position: absolute;
    left: 98px;
    bottom: 43px;
    border-radius: 0 0 0 20%;
}
.rightEar {
    display: block;
    background: transparent;
    width: 2px;
    height: 15px;
    border-right: 4px solid #000;
    position: absolute;
    left: 106px;
    bottom: 50px;
    transform: rotate(-40deg);
    border-radius: 10% 10% 30% 10%;
}
.rightEar:before {
    content: "";
    width: 5px;
    height: 13px;
    border-right: 4px solid #000;
    transform: rotate(10deg);
    position: absolute;
    left: -4px;
    top: 13px;
    border-radius: 10% 10% 30% 10%;
}
.rightEar:after {
    content: "";
    width: 5px;
    height: 10px;
    border-right: 4px solid #000;
    transform: rotate(9deg);
    position: absolute;
    left: -6px;
    top: 25px;
    border-radius: 10% 10% 30% 10%;
}
/* eyes */

.face {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 140px;
    top: 50px;
}
.face:before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 60px;
    top: 15px;
}
.mouth {
    display: block;
    width: 10px;
    height: 8px;
    position: absolute;
    left: 15px;
    top: 0ps;
    transform: rotate(45deg);
    border-radius: 50%;
    border: 3px solid #000;
    border-left-color: transparent;
    border-top-color: transparent;
}
.mouth:before {
    content: "";
    display: block;
    width: 10px;
    height: 8px;
    position: absolute;
    left: 9px;
    top: -10px;
    transform: rotate(20deg);
    border-radius: 50%;
    border: 3px solid #000;
    border-left-color: transparent;
    border-top-color: transparent;
}
.leftPaw {
    width: 25px;
    height: 30px;
    background: #fff;
    border: 4px solid #000;
    border-bottom: 0 solid transparent;
    border-right: 0 solid transparent;
    border-radius: 50% 40% 0 0;
    position: absolute;
    left: 90px;
    top: 40px;
    transform: rotate(-20deg);
    z-index: 2;
}
.leftPaw:before {
    content: "";
    display: block;
    width: 3px;
    height: 15px;
    background: #000;
    border-radius: 100% 0 0 0;
    position: absolute;
    left: 24px;
    top: 4px;
    transform: rotate(-20deg);
}
.rightPaw {
    width: 25px;
    height: 30px;
    background: #fff;
    border: 3px solid #000;
    border-bottom: 0 solid transparent;
    border-right: 0 solid transparent;
    border-radius: 50% 40% 0 0;
    position: absolute;
    left: 222px;
    top: 60px;
    transform: rotate(-20deg);
    z-index: 2;
}
.rightPaw:before {
    content: "";
    display: block;
    width: 3px;
    height: 15px;
    background: #000;
    border-radius: 100% 0 0 0;
    position: absolute;
    left: 23px;
    top: 2px;
    transform: rotate(-23deg);
}
.surface {
    width: 350px;
    height: 50px;
    background: #fff;
    border-top: 3px solid #000;
    transform: rotate(10deg);
    position: absolute;
    top: 215px;
    z-index: 3;
}
.paws {
    display: block;
    width: 8px;
    height: 10px;
    background: #f19ba5;
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    top: 9px;
    left: 7px;
}
.circles {
    display: block;
    width: 5px;
    height: 4px;
    background: #f19ba5;
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    top: -3px;
    left: 8px;
}
.circles:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #f19ba5;
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    top: -3px;
    left: -6px;
}
.circles:after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #f19ba5;
    border-radius: 50% 30%;
    position: absolute;
    top: 1px;
    left: -12px;
}
i {
    font-size: 24px;
    font-weight: 800;
    color: #abbac6;
    position: relative;
    left: 80px;
    padding: 10px 100px 10px 0;
}
.rotate {
    transform: scale(1, -1);
}
.red {
    color: red;
}
.green {
    color: limegreen;
}
.leftPaw2 {
    width: 40px;
    height: 28px;
    background: #fff;
    border: 4px solid #000;
    border-bottom: 0 solid transparent;
    border-right: 0 solid transparent;
    border-radius: 50% 4px 50% 50%;
    position: absolute;
    left: 87px;
    top: 58px;
    transform: rotate(-43deg);
    z-index: 4;
}
.leftPaw2:before {
    content: "";
    display: block;
    width: 30px;
    height: 5px;
    background: #fff;
    border-bottom: 4px solid #000;
    border-radius: 50% 4px 50% 50%;
    position: absolute;
    top: 20px;
    transform: rotate(20deg);
}
.rightPaw2 {
    width: 45px;
    height: 24px;
    background: #fff;
    border-bottom: 3px solid #000;
    border-left: 3px solid #000;
    border-radius: 50% 4px 0 40%;
    position: absolute;
    left: 207px;
    top: 85px;
    transform: rotate(-23deg);
    z-index: 4;
}
.rightPaw2:before {
    content: "";
    display: block;
    width: 20px;
    height: 5px;
    background: #fff;
    border-top: 3px solid #000;
    border-radius: 50% 4px 50% 50%;
    position: absolute;
    top: 0px;
    left: 2px;
    transform: rotate(-20deg);
}
.author {
    font-size: 10px;
    position: relative;
    top: -50px;
    left: 250px;
}

HTML

点击小猫，会举手或放在桌面上。

h5, cat

编辑器支持Emmet

快捷键

点击小猫，会举手或放在桌面上。

h5, cat

小猫身体各个部位的细节动画

HTML5 Bodymovin.js + Anime.js实现很有趣的骑自行车动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：