CSS3球体掉落动画带阴影效果

球体掉落

css, drop, ball

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

#zhuti {
        height: 500px;
        width: 600px;
        background-image: url(/uploads/user_upload/46900/001.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #qq {
        height: 100px;
        width: 100px;
        margin: 0 auto;
        background-image: url(/uploads/user_upload/46900/002.jpg);
        border-radius: 50%;
        background-size: 100px;
        /* background-position: 50% 50%; */
        
        animation: kk 5s infinite linear;
    }
    footer {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: black;
        opacity: 0.5;
        position: absolute;
        bottom: 210px;
        margin: 0 auto;
        transform: rotateX(70deg);
        left: 285px;
        filter: blur(5px);
        animation: yinying 5s infinite linear;
    }
    @keyframes kk {
        0% {
            transform: translateY(0);
        }
        20% {
            transfrom: translateY(150px);
        }
        40% {
            transform: translateY(300px);
        }
        60% {
            transform: translateY(150px);
        }
        80% {
            transform: translateY(255px);
        }
        100% {
            transform: translateY(300px);
        }
    }
    @keyframes yinying {
        0% {
            width: 20px;
            height: 20px;
        }
        20% {
            width: 70px;
            height: 70px;
        }
        40% {
            width: 35px;
            height: 35px;
        }
        60% {
            width: 70px;
            height: 70px;
        }
        80% {
            width: 55px;
            height: 55px;
        }
        100% {
            width: 70px;
            height: 70px;
        }
    }

HTML

球体掉落

css, drop, ball

编辑器支持Emmet

快捷键

球体掉落

css, drop, ball

CSS3 带阴影效果的正方体齿轮动画

Matter.js加CSS3实现球体掉落眼球跟踪（万众瞩目）交互效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：