SVG和CSS实现的皮球内发光物碰击球面的动画

SVG, CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background: radial-gradient(#503399, #140d26);
    height: 100%;
}
.circle1 {
    fill: rgba(183, 255, 0, 0.7);
    animation: balls 4s cubic-bezier(0.001, 0.01297, 1, 1.12303) infinite;
    position: absolute;
    z-index: 2;
}
.circle1:hover {
    fill: rgba(255, 26, 0, 0.9);
    mix-blend-mode: color-dodge;
}
.circle2 {
    position: absolute;
    z-index: -3;
    fill: rgba(89, 45, 210, 0.7);
    cursor: pointer;
    animation: rot 13s cubic-bezier(1, 2.69433, 1, 0.49947) infinite;
}
.circle2:hover {
    fill: rgba(0, 255, 170, 0.371);
}
@keyframes rot {
    50% {
        mix-blend-mode: color-burn;
        fill: rgba(41, 0, 153, 0.7);
    }
}
@keyframes balls {
    0%, 100% {
        transform: translateY(0px) translateX(-120px);
    }
    20% {
        transform: translateX(-100px) scale(1.3);
    }
    40% {
        transform: translateY(-100px) translateX(-100px);
    }
    60% {
        transform: translateY(-140px) translateX(-100px) scale(1.4);
    }
}
svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

HTML