css+div实现彩色尖刺球动画代码-html代码-BFW代码库

css+div实现彩色尖刺球动画代码

代码语言：html

所属分类：动画

代码描述：css+div实现彩色尖刺球动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #111;
    color: #fff;
    min-height: 100vh;
    display: grid;
    place-items: center;
    perspective: 600px;
    overflow: clip;
    
    * {
        transform-style: preserve-3d;
    }
}

.scene {
    position: relative;
    animation: scene 24s infinite linear;
    
    * { position: absolute; }
}

@keyframes scene {
    from { transform: rotateX(0deg) rotateZ(0deg);}
    to { transform: rotateX(360deg) rotateZ(360deg);}
}

.spike {
    inset: -3em;
    animation: spike
        calc(sin(var(--s) * 137.5deg) * 0.5s + 2s) /* duration variation */
        calc(sin(var(--s) * 222.5deg) * 6s - 6s) /* 'random' delay */
        infinite ease-in-out alternate;

    &:has(i:nth-child(6)) {
        --side-angle-z: 60deg;
        --side-angle-x: -49deg;
        --bottom-size: 2.6em;
    }
    
    --color1: hsl(calc(var(--s) * 11.25) 100% 8%);
    --color2: hsl(calc(var(--s) * 11.25) 100% 4%);
    --border: #fff;

    i {
        left: 50%; bottom: 50%;
        width: 3em; height: 4em;
        transform-origin: bottom;
        transform:
            translateX(-50%)
            rotateZ(calc(var(--i) * var(--side-angle-z, 72deg)))
            translat.........完整代码请登录后点击上方下载按钮下载查看