设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 8 1 - 【3·15】#鱼C - 高B格SVG宣传页
返回列表 发新帖
查看: 2358|回复: 5

[庖丁解牛] 0 0 8 1 - 【3·15】#鱼C - 高B格SVG宣传页

[复制链接]
不二如是
发表于 2017-3-15 16:06:27 | 显示全部楼层 |阅读模式
购买主题 已有 8 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

aswyamato1989
发表于 2017-8-24 02:38:00 | 显示全部楼层
交作业！
081.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

MSK
发表于 2018-8-6 21:17:32 | 显示全部楼层
交作业~ svg.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

睁眼睡大觉
发表于 2019-3-30 19:59:07 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>0081</title>
  6.                 <style type="text/css">
  7.                         body{
  8.                                 margin: 66px;
  9.                         }
  10.                         #intro{
  11.                                 background: url(81.png);
  12.                                 width: 500px;
  13.                                 height: 668px;
  14.                                 position: relative;
  15.                                 overflow: hidden;
  16.                         }
  17.                         #web_intro{
  18.                                 position: absolute;
  19.                                 color: #FFF;
  20.                                 box-sizing: border-box;

  22.                                 padding: 0 33px;
  23.                                 z-index: 22;
  24.                         }
  25.                         h1{
  26.                                 font-size: 35px;
  27.                                 font-family: "Helvetica";
  28.                         }
  29.                         p{
  30.                                 font-size: 33px;
  31.                                 font-family: "Academy Engraved LET";
  32.                         }
  33.                         #polygon{
  34.                                 fill: #06F;
  35.                                 stroke-width: 0;
  36.                         }
  37.                         #intro:hover svg{
  38.                                 opacity: .66;
  39.                                 transform: translateY(-99px);
  40.                         }
  41.                         #intro svg{
  42.                                 transition: all .9s ease-in-out;
  43.                         }
  44.                 </style>
  45.         </head>
  46.         <body>
  47.                 <div id="intro">
  48.                         <div id="web_intro">
  49.                                 <h1>鱼C工作室-众神所在</h1>
  50.                                 <p>代码改变人生</p>
  51.                         </div>
  52.                         <svg height="668" width="500">
  53.                                 <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="
  54. #000" id="polygon"/>
  55.                         </svg>
  56.                 </div>
  57.         </body>
  58. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-14 01:08:50 | 显示全部楼层
每天进步一点点，学习新的标签polygon绘制多边形，使用z-index设置元素堆叠，实现背景的层叠。
1578935207(1).jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-4-13 18:43:33 | 显示全部楼层
test.png 这个字体额感觉么有变化


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>81,高逼格</title>
  7.     <style type="text/css">
  8.         body{
  9.             margin: 66px;
  10.         }
  11.         #intro{
  12.             background: url(cloud.jpg);
  13.             width: 500px;
  14.             height: 668px;
  15.             position: relative;
  16.             overflow: hidden; /*超出宽度或高度的部分，自动隐藏了*/
  17.         }
  18.         #web_intro{
  19.             position: absolute;
  20.             color: #ffffff;
  21.             box-sizing: border-box;
  22.             padding: 0 33px;
  23.             z-index: 22; /*如果为正数，则离用户更近，为负数则表示离用户更远。*/
  24.         }
  25.         #polygon{
  26.             fill: #0066ff;
  27.             stroke-width: 0;
  28.         }
  29.         h1{
  30.             font-size: 33px;
  31.             font-family:Arial, Helvetica, sans-serif;
  32.         }
  33.         p{
  34.             font-size: 22px;
  35.             font-family: 'Academy Engraved LET';
  36.             
  37.         }
  38.         #intro:hover svg{
  39.             opacity: .66;/*设置透明度*/
  40.             transform: translateY(-99px);/*表示svg图形上移99px。*/
  41.         }
  42.         #intro svg{
  43.             transition: all .9s ease-in-out;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div id="intro">
  49.         <div id="web_intro">
  50.             <h1>甲鱼工作室</h1>
  51.             <p>改变世界，改变自己，努力努力哎不能懒</p>
  52.         </div>
  53.         <svg width="500" height="668">
  54.             <!--多边形坐标,加黑色线-->
  55.             <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon"/>
  56.         </svg>
  57.     </div>
  58. </body>
  59. </html>
复制代码



想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-16 14:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表