不二如是 发表于 2017-3-15 16:06:27

已有 8 人购买  本主题需向作者支付 2 鱼币 才能浏览 购买主题

aswyamato1989 发表于 2017-8-24 02:38:00

交作业！

MSK 发表于 2018-8-6 21:17:32

交作业~

睁眼睡大觉 发表于 2019-3-30 19:59:07

<!DOCTYPE html>
<html lang="en">
      <head>
                <meta charset="utf-8">
                <title>0081</title>
                <style type="text/css">
                        body{
                              margin: 66px;
                        }
                        #intro{
                              background: url(81.png);
                              width: 500px;
                              height: 668px;
                              position: relative;
                              overflow: hidden;
                        }
                        #web_intro{
                              position: absolute;
                              color: #FFF;
                              box-sizing: border-box;

                              padding: 0 33px;
                              z-index: 22;
                        }
                        h1{
                              font-size: 35px;
                              font-family: "Helvetica";
                        }
                        p{
                              font-size: 33px;
                              font-family: "Academy Engraved LET";
                        }
                        #polygon{
                              fill: #06F;
                              stroke-width: 0;
                        }
                        #intro:hover svg{
                              opacity: .66;
                              transform: translateY(-99px);
                        }
                        #intro svg{
                              transition: all .9s ease-in-out;
                        }
                </style>
      </head>
      <body>
                <div id="intro">
                        <div id="web_intro">
                              <h1>鱼C工作室-众神所在</h1>
                              <p>代码改变人生</p>
                        </div>
                        <svg height="668" width="500">
                              <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="
#000" id="polygon"/>
                        </svg>
                </div>
      </body>
</html>

suweixuan1998 发表于 2020-1-14 01:08:50

每天进步一点点，学习新的标签polygon绘制多边形，使用z-index设置元素堆叠，实现背景的层叠。

小脑斧 发表于 2020-4-13 18:43:33

这个字体额感觉么有变化


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>81,高逼格</title>
    <style type="text/css">
      body{
            margin: 66px;
      }
      #intro{
            background: url(cloud.jpg);
            width: 500px;
            height: 668px;
            position: relative;
            overflow: hidden; /*超出宽度或高度的部分，自动隐藏了*/
      }
      #web_intro{
            position: absolute;
            color: #ffffff;
            box-sizing: border-box;
            padding: 0 33px;
            z-index: 22; /*如果为正数，则离用户更近，为负数则表示离用户更远。*/
      }
      #polygon{
            fill: #0066ff;
            stroke-width: 0;
      }
      h1{
            font-size: 33px;
            font-family:Arial, Helvetica, sans-serif;
      }
      p{
            font-size: 22px;
            font-family: 'Academy Engraved LET';
            
      }
      #intro:hover svg{
            opacity: .66;/*设置透明度*/
            transform: translateY(-99px);/*表示svg图形上移99px。*/
      }
      #intro svg{
            transition: all .9s ease-in-out;
      }
    </style>
</head>
<body>
    <div id="intro">
      <div id="web_intro">
            <h1>甲鱼工作室</h1>
            <p>改变世界，改变自己，努力努力哎不能懒</p>
      </div>
      <svg width="500" height="668">
            <!--多边形坐标,加黑色线-->
            <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon"/>
      </svg>
    </div>
</body>
</html>


页: [1]
查看完整版本: 0 0 8 1 - 【3·15】#鱼C - 高B格SVG宣传页