css实现一个文字阴影变化效果代码-html代码-BFW代码库

css实现一个文字阴影变化效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个文字阴影变化旋转效果代码，边框同时进行变形。

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

<!doctype html>

<html>

<head>
    <meta charset="UTF-8">

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: bisque;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
            height: 60%;
            border: 1px solid gray;
        }
     :root {
        
        --light-position-x: 0px;
        --light-position-y: 0px;

        --light-elevation: 100;

        --light-intensity: 100;
        --blur-factor: 4px;
        --spread-factor: 1px;

        --light-hue: 0deg;
        --light-saturation: 0%;
        --light-brightness: 50%;

        --parent-elevation: 0;

        --element-altitude: 0;

        --text-altitude: 0;

        --intersection-x: 50vw;
        --intersection-y: 50vh;
        /*}*/
}

.zBoxShadow > * {
        box-shadow: initial;
}

.zBoxShadow {
        --element-elevation: calc(var(--parent-elevation) + var(--element-altitude));
        --light-altitude: calc(var(--light-elevation) - var(--element-elevation));
        --altitude-ratio: calc(var(--element-altitude) / var(--light-altitude));
        --light-direction-x: calc(var(--intersection-x) - var(--light-position-x));
        --light-direction-y: calc(var(--intersection-y) - var(--light-position-y).........完整代码请登录后点击上方下载按钮下载查看