css实现胡迪尼魔法动画效果代码-html代码-BFW代码库

css实现胡迪尼魔法动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现胡迪尼魔法动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
@charset "UTF-8";

@keyframes float {
        to {
            transform: translateY(0.75em);
        }
    }
@property --k0 {
        syntax: "<number>";
        initial-value: 0;
        inherits: true;
    }
@property --k1 {
        syntax: "<number>";
        initial-value: 0;
        inherits: true;
    }
@property --ang {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
@property --x {
        syntax: "<percentage>";
        initial-value: 0%;
        inherits: false;
    }
@property --y {
        syntax: "<percentage>";
        initial-value: 0%;
        inherits: false;
    }
        body, div {
            display: grid;
        }

        body {
            place-content: center;
            overflow: hidden;
            margin: 0;
            height: 100vh;
            background: #000;
            color: #fff;
            font-size: clamp(1em, 6vw, 2em);
        }
        body::after {
            padding: 8.5em;
            background: repeating-conic-gradient(from var(--ang) at var(--x) var(--y),#00fffc, #fc00ff, #fffc00, #00fffc 33.333%);
            mix-blend-mode: multiply;
            animation: a 6s infinite;
            animation-name: ang, x, y;
            animation-timing-function: linear, cubic-bezier(0.75, 0.25, 0.75, 0.25), cubic-bezier(0.25, 0.75, 0.25, 0.75);
            content: "";
        }

@keyframes ang {
            to {
                --ang: 1turn;
            }
        }
@keyframes x {
            50% {
                --x: 100%;
            }
        }
@keyframes y {
            50% {
                --y: 100%;
            }
        }
        div, ::before, ::after {
            grid-area: 1/1;
            place-self: center;
            border-radius: 50%;
        }

        .load {
            padding: 8.5em;
            background: inherit;
        }

        .a2d {
            filter: drop-shadow(0 0 0.25em currentcolor) blur(1px);
            animation: r 3s linear infinite;
        }

@k.........完整代码请登录后点击上方下载按钮下载查看