css实现鬼魂与人牵手看日落代码

代码语言:html

所属分类:布局界面

代码描述:css实现鬼魂与人牵手看日落代码

代码标签: css 鬼魂 牵手 日落

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        .forever {
          position: fixed;
          inset: 0;
          --c: #000;
          background:
            radial-gradient(110% 200px at bottom,#263c47 99%,#0000),
            radial-gradient(circle at 50% calc(100% - 220px),#fef9bf,#fffff7 250px,#0000 252px),
            #18104b;
        }
        .forever:before {
          content: "";
          position: absolute;
          bottom: 182px;
          width: 100px;
          aspect-ratio: .75;
          left: calc(50% - 10px);
          background: 
            radial-gradient(50% 50%,var(--c) 97%,#0000) 74% 50%/9% 8%,
            linear-gradient(69deg,#0000 41%,var(--c) 42% 67%,#0000 68%) 68% 33%/26% 29%,
            radial-gradient(50% 50%,var(--c) 97%,#0000) 18% 50%/11% 8%,
            linear-gradient(124deg,#0000 41%,var(--c) 42% 67%,#0000 68%) 23% 33%/26% 29%,
            conic-gradient(from 167deg at 50% -55%,#0000,var(--c) 1deg 26deg,#0000 27deg) 50% 43%/100% 45%,
            linear-gradient(var(--c) 0 0) 40% 91%/14% 27%,
            linear-gradient(var(--c) 0 0) 60% 91%/14% 27%,
            radial-gradient(50% 50%,var(--c) 97%,#0000) 40% 99%/14% 11%,
            radial-gradient(50% 50%,var(--c) 97%,#0000) 60% 99%/14% 11%,
            radial-gradient(50% 50%,var(--c) 95%.........完整代码请登录后点击上方下载按钮下载查看

网友评论0