Vue.js+Lodash.js+Anime.js鼠标操控口袋妖怪

VueJS Peek-a-boo game

h5, vue, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

const appCenter = body.getBoundingClientRect();
const appCenterX = appCenter.left + (appCenter.width / 2);
const appCenterY = appCenter.top + (appCenter.height / 2);

编译

CSS

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:300";
* {
    box-sizing: border-box;
}
body {
    height: 100vh;
    background-color: #888;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    line-height: 1.875em;
    color: #fff;
}
#app {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.pattern-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.pattern-bg {
    position: absolute;
    width: 100%;
    opacity: 0.05;
}
.castle-fill {
    fill: #fff;
}
.castle-pattern {
    fill: url(#castleBrick);
}
#boo {
    width: 120px;
    -webkit-transform: translateX(calc(var(--pos-x) * 0.7px)) translateY(calc(var(--pos-y) * 1px));
    transform: translateX(calc(var(--pos-x) * 0.7px)) translateY(calc(var(--pos-y) * 1px));
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    -webkit-perspective: 500px;
    perspective: 500px;
}
#boo .inner-wrapper {
    -webkit-transform-origin: 75px 75px;
    transform-origin: 75px 75px;
    -webkit-transition: 0.45s;
    transition: 0.45s;
}
#boo .mirror {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#boo .cover #pinky .boo-pink-fill {
    opacity: 0.05;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.boo-shadow-fill {
    fill: #2affc8;
    mix-blend-mode: overlay;
}
.boo-body-stroke,
.boo-inner-stroke {
    stroke: #434343;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.boo-inner-stroke {
    stroke-width: 1px;
}
.boo-body-stroke {
    stroke-width: 3px;
}
.boo-body-fill {
    fill: #fff;
}
.boo-stroke-fill {
    fill: #434343;
}
.boo-highlight-fill {
    fill: #fff;
}
.boo-pink-fill {
    fill: #f700d4;
}
.boo-pink-fill-dark {
    fill: #c400a8;
}
.no-fill-for-you {
    fill: none;
}
#armRight {
    -webkit-transform-origin: 85px 72px;
    transform-origin: 85px 72px;
}
#armLeft {
    -webkit-transform-origin: 20px 72px;
    transform-origin: 20px 72px;
}
#eyeRight .boo-eye {
    -webkit-transform-origin: 45px 52px;
    transform-origin: 45px 52px;
}
#eyeRight .boo-eyelid {
    -webkit-transform-origin: 29px 48px;
    transform-origin: 29px 48px;
}
#eyeLeft .boo-eye {
    -webkit-transform-origin: 45px 52px;
    transform-origin: 45px 52px;
}
#eyeLeft .boo-eyelid {
    -webkit-transform-origin: 48px 48px;
    transform-origin: 48px 48px;
}
.boo-eyelid {
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.boo-mouth-closed {
    fill: #fff;
}
#mouthOpen {
    -webkit-transform-origin: 42px 80px;
    transform-origin: 42px 80px;
}
#pinky .boo-pink-fill {
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.fade-y-enter-active,
.fade-y-leave-active {
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
}
.fade-y-enter-active {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.fade-y-enter,
.fade-y-leave-to {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
}

HTML

VueJS Peek-a-boo game

h5, vue, game

编辑器支持Emmet

快捷键

VueJS Peek-a-boo game

h5, vue, game

HTML5 Audio+Matter.js 随音乐节奏而动的踩单车杂技表演

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：