浙江铃声推荐联盟

html5制作边框线条特效

学习web前端2019-05-16 22:10:22

边框线条特效源码
  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4. <!--声明当前页面的编码格式 国际编码 UTF-8 中文编码 GBK-->

  5. <meta charset="UTF-8">

  6. <!--声明当前页面的三要素-->

  7. <meta name="Keywords" content="">

  8. <meta name="Description" content="">

  9. <title>web前端</title>

  10. <!--样式css 修饰 衣服 化妆品-->

  11. <style type="text/css">

  12.     *{margin:0;padding:0;}

  13.     body{background:#000;color:#fff;font-family:cursive;}

  14.     header{font-size:100px;text-align:center;}

  15.     #websvg{width:1000px;height:500px;margin:0 auto;text-align:center;}

  16.     .grid{width:300px; height:460px;position:relative; float:left;margin:20px 15px;}

  17.     .grid svg{position:absolute;top:0;left:0;}

  18.     .grid svg line{stroke-width:4px;/*轮廓厚度*/stroke:#abcdef;/*触笔颜色*/transition:all 0.5s;}

  19.     .grid h3{font-size:180px;line-height:370px;font-weight:normal;}

  20.     .grid svg:hover line{stroke-width:14px;}

  21.     .grid svg:hover line.top,.grid svg:hover line.bottom{stroke-dasharray:330px 240px;}

  22.     .grid svg:hover line.left,.grid svg:hover line.right{stroke-dasharray:490px 400px;}

  23.     .grid svg:hover line.top{transform:translateX(-300px);}

  24.     .grid svg:hover line.bottom{transform:translateX(300px);}

  25.     .grid svg:hover line.left{transform:translateY(460px);}

  26.     .grid svg:hover line.right{transform:translateY(-460px);}

  27. </style>

  28. </head>

  29. <body>

  30.     <header>HTML5</header>

  31.     <div id="websvg">

  32.         <div class="grid">

  33.             <svg width="100%" height="100%">

  34.                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

  35.                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

  36.                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

  37.                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

  38.             </svg>

  39.             <h3>S</h3>

  40.             <span>2017!我们一起学习!一起进步</span>

  41.         </div>

  42.         <div class="grid">

  43.             <svg width="100%" height="100%">

  44.                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

  45.                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

  46.                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

  47.                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

  48.             </svg>

  49.             <h3>v</h3>

  50.             <span>2017!我们一起学习!一起进步</span>

  51.         </div>

  52.         <div class="grid">

  53.             <svg width="100%" height="100%">

  54.                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

  55.                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

  56.                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

  57.                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

  58.             </svg>

  59.             <h3>g</h3>

  60.             <span>2017!我们一起学习!一起进步</span>

  61.         </div>

  62.     </div>

  63. </body>

  64. </html>


感谢  ·  转发欢迎大家留言