HTML5/CSS3香蕉色皮球弹跳动画

These Balls are Bananas，很真实的3D靠近视觉效果。

css3, ball, bounce

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    2% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    50% {
        -webkit-transform: translatey(-24rem);
        transform: translatey(-24rem);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}
@keyframes bounce {
    0% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    2% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    50% {
        -webkit-transform: translatey(-24rem);
        transform: translatey(-24rem);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
        -webkit-transform: translatey(0);
        transform: translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}
@-webkit-keyframes shadow {
    0% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
    2% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
    50% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(40rem);
        transform: scaley(0.5) scalex(1) translatey(40rem);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        box-shadow: 15rem 40rem 40rem 10rem rgba(218, 118, 11, 0.4);
    }
    100% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
}
@keyframes shadow {
    0% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
    2% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
    50% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(40rem);
        transform: scaley(0.5) scalex(1) translatey(40rem);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        box-shadow: 15rem 40rem 40rem 10rem rgba(218, 118, 11, 0.4);
    }
    100% {
        -webkit-transform: scaley(0.5) scalex(1) translatey(0);
        transform: scaley(0.5) scalex(1) translatey(0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        box-shadow: 2.5rem 10rem 10rem 5rem rgba(218, 118, 11, 0.4);
    }
}
@-webkit-keyframes squish {
    0% {
        -webkit-transform: scaley(0.95) scalex(1.05);
        transform: scaley(0.95) scalex(1.05);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    7% {
        -webkit-transform: scaley(0.85) scalex(1.15);
        transform: scaley(0.85) scalex(1.15);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    50% {
        -webkit-transform: scaley(1.05) scalex(0.95);
        transform: scaley(1.05) scalex(0.95);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        -webkit-transform: scaley(1) scalex(1);
        transform: scaley(1) scalex(1);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}
@keyframes squish {
    0% {
        -webkit-transform: scaley(0.95) scalex(1.05);
        transform: scaley(0.95) scalex(1.05);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    7% {
        -webkit-transform: scaley(0.85) scalex(1.15);
        transform: scaley(0.85) scalex(1.15);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    50% {
        -webkit-transform: scaley(1.05) scalex(0.95);
        transform: scaley(1.05) scalex(0.95);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        -webkit-transform: scaley(1) scalex(1);
        transform: scaley(1) scalex(1);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}
@-webkit-keyframes entry {
    0% {
        -webkit-transform: perspective(100rem) translate3d(85vw, -25vh, -50rem);
        transform: perspective(100rem) translate3d(85vw, -25vh, -50rem);
    }
    100% {
        -webkit-transform: perspective(100rem) translate3d(-50vw, 25vh, 50rem);
        transform: perspective(100rem) translate3d(-50vw, 25vh, 50rem);
    }
}
@keyframes entry {
    0% {
        -webkit-transform: perspective(100rem) translate3d(85vw, -25vh, -50rem);
        transform: perspective(100rem) translate3d(85vw, -25vh, -50rem);
    }
    100% {
        -webkit-transform: perspective(100rem) translate3d(-50vw, 25vh, 50rem);
        transform: perspective(100rem) translate3d(-50vw, 25vh, 50rem);
    }
}
.scene {
    position: absolute;
    top: calc(50% - 10rem);
    left: calc(50% - 10rem);
    -webkit-animation: entry 9s infinite linear;
    animation: entry 9s infinite linear;
}
.ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    height: 20rem;
    position: relative;
    -webkit-animation: bounce 1.8s infinite;
    animation: bounce 1.8s infinite;
}
.ball:before,
.ball:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20rem;
    width: 100%;
    height: 100%;
}
.ball:after {
    background: #f7da6e;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    box-shadow: inset -3rem -3rem 3rem -3rem rgba(247, 218, 110, 0.4), inset 10rem 10rem 10rem -10rem rgba(250, 236, 158, 0.4), inset -10rem -10rem 10rem -10rem rgba(218, 118, 11, 0.4);
    -webkit-animation: squish 1.8s infinite;
    animation: squish 1.8s infinite;
}
.ball:before {
    width: 5%;
    height: 5%;
    top: 65%;
    left: 45%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: shadow 1.8s infinite;
    animation: shadow 1.8s infinite;
}
html {
    font-size: 1vh;
}
body {
    height: 100vh;
    width: 100vw;
    background: -webkit-linear-gradient(120deg, #f5c13d, #f7da6e);
    background: linear-gradient(-30deg, #f5c13d, #f7da6e);
    font-family: "Merriweather", serif;
    color: white;
    font-size: 2rem;
    overflow: hidden;
}
.sig {
    position: fixed;
    bottom: 8px;
    right: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 100;
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
}

HTML

These Balls are Bananas，很真实的3D靠近视觉效果。

css3, ball, bounce

编辑器支持Emmet

快捷键

These Balls are Bananas，很真实的3D靠近视觉效果。

css3, ball, bounce

HTML5/Canvas彩色弹珠沙盒碰撞交互动画

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：