态射环码-js教程-PHP中文网

态射环码

Mary-Kate Olsen

发布： 2025-01-03 00:10:39

原创

984 人浏览过

Morphism Ring code

<html lang="zh-cn">
<头>
    
    
    <title>变形渐变环</title>
    
        身体 {
            保证金：0；
            高度：100vh；
            显示：柔性；
            调整内容：居中；
            对齐项目：居中；
            背景：线性渐变（120deg，#0d1015，#091529）；
            溢出：隐藏；
        }

        .ring-container {
            位置：相对；
            宽度：300px；
            高度：300px；
        }

        。戒指 {
            位置：绝对；
            顶部：50%；
            左：50%；
            宽度：100%；
            高度：100%；
            边界半径：50%；
            背景：圆锥曲线渐变（
            从 0deg，#ff7eb3，#ff758c，#ff6a56， 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            ）；
            变换：翻译（-50%，-50%） 
            旋转（0度）；
            动画：rotateRing 5s线性无限；
        }

        .ring::之前{
            内容： '';
            位置：绝对；
            顶部：50%；
            左：50%；
            宽度：80%；
            身高：80%；
            背景: 线性渐变(到右下角, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
            边界半径：50%；
            滤镜：模糊（10px）；
            变换：翻译（-50%，-50%）；
        }

        .ring::之后{
            内容： '';
            位置：绝对；
            顶部：50%；
            左：50%；
            宽度：60%；
            身高：60%；
            背景：rgba(255, 255, 255, 0.1);
            边框: 2px 实心 rgba(255, 255, 255, 0.2);
            边界半径：50%；
            变换：翻译（-50%，-50%）；
        }

        @keyframes旋转环{
            0% {
                变换：翻译（-50%，-50%） 
                旋转（0度）；
            }
            100% {
                变换：翻译（-50%，-50%）
                旋转（360度）；
            }
        }
    </风格>
</头>

    <div>




          </div>

登录后复制

以上是态射环码的详细内容。更多信息请关注PHP中文网其他相关文章！