css布局实现一个人顶住压力将石球往坡上推代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现一个人顶住压力将石球往坡上推代码

代码标签: css 顶住 压力 石球 坡上

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background: darkorange;
          overflow: hidden;
        }
        
        .forever{
          --c: #180527;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100vmin;
          height: 100vmin;
          background:
            /* sisyphus */
            /* head */
            radial-gradient(farthest-side at 55% 50%, #000 99%, #0000 0) 38.5% 66.25% / 5% 5%,
            /* foot back */
            radial-gradient(farthest-side at 40% 50%, #000 99%, #0000 0) 27.5% 95% / 2% 2%,
            radial-gradient(farthest-side at 40% 50%, #000 99%, #0000 0) 26.5% 95.75% / 1.5% 5%,
            radial-gradient(farthest-side, #000 99%, #0000 0) 26.25% 92% / 1.25% 1.25%,
            /* leg front */
            radial-gradient(farthest-side at 40% 40%, #000 99%, #0000 0) 36.5% 80% / 8% 2.75%,
            radial-gradient(farthest-side, #000 99%, #0000 0) 38.5% 88.5% / 2% 5%,
            /* hand + arm */
            radial-gradient(circle at 45.5% 64%, #000 2%, #0000 0),
            radial-gradient(farthest-side at 45% 60%, #000 99%, #0000 0) 45.35% 70% / 1.5% 7%,
            /* /sisyphus */
            /* boulder */
            radial-gradient(at 55% 55%, #000 18%, #0000 0),
            /* mountain */
            linear-gradient(340deg, #000 24%, #0000 0),
            linear-gradient(320deg, #000 35%, #0000 0) 20% 100% / 80% 80%,
            conic-gradient(at 83% 49%, #0000 60deg, #000 0 180deg, #0000 0),
            radial-gradient(100% 50% at 80% 100%, #000 50%, #0000 0),
            radial-gradient(circle at 85% 53.66%, #000 5%, #0000 0),
            /* sun setting */
            radial-gradient(farthest-side at 100% 100%, #ff8, #0000);
          background-repeat: no-repeat;
        }
        
        .forever::before,
        .forever::after {
          content: "";
          position: absolute;
          bottom: -10%;
          right: 0;
          wi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0