web前端基础小白练习效果，边框线条特效

来源：互联网发布：萧涵seo 编辑：程序博客网时间：2024/04/30 03:36

这样的线条效果是不是很炫呢？代码不长，用了少量的css就ok了，基础阶段的小伙伴可以用这效果练习一下。

<!doctype html><html lang="en"><head><!--声明当前页面的编码格式 国际编码 UTF-8 中文编码 GBK--><meta charset="UTF-8"><!--声明当前页面的三要素--><meta name="Keywords" content=""><meta name="Description" content=""><title>web前端</title><!--样式css 修饰 衣服 化妆品--><styletype="text/css">    *{margin:0;padding:0;}    body{background:#000;color:#fff;font-family:cursive;}    header{font-size:100px;text-align:center;}    #websvg{width:1000px;height:500px;margin:0auto;text-align:center;}    .grid{width:300px;height:460px;position:relative;float:left;margin:20px15px;}    .grid svg{position:absolute;top:0;left:0;}    .grid svg line{stroke-width:4px;/*轮廓厚度*/stroke:#abcdef;/*触笔颜色*/transition:all0.5s;}    .grid h3{font-size:180px;line-height:370px;font-weight:normal;}    .grid svg:hover line{stroke-width:14px;}    .grid svg:hover line.top,.grid svg:hover line.bottom{stroke-dasharray:330px240px;}    .grid svg:hover line.left,.grid svg:hover line.right{stroke-dasharray:490px400px;}    .grid svg:hover line.top{transform:translateX(-300px);}    .grid svg:hover line.bottom{transform:translateX(300px);}    .grid svg:hover line.left{transform:translateY(460px);}    .grid svg:hover line.right{transform:translateY(-460px);}</style></head><body>    <header>HTML5</header>    <divid="websvg">        <divclass="grid">            <svgwidth="100%"height="100%">                <lineclass="top"x1="0" y1="0" x2="900"y2="0" />                <lineclass="left"x1="0" y1="460" x2="0"y2="-920" />                <lineclass="bottom"x1="300" y1="460" x2="-600"y2="460" />                <lineclass="right"x1="300" y1="0" x2="300"y2="1380" />            </svg>            <h3>S</h3>            <span>2017！我们一起学习！一起进步</span>        </div>        <divclass="grid">            <svgwidth="100%"height="100%">                <lineclass="top"x1="0" y1="0" x2="900"y2="0" />                <lineclass="left"x1="0" y1="460" x2="0"y2="-920" />                <lineclass="bottom"x1="300" y1="460" x2="-600"y2="460" />                <lineclass="right"x1="300" y1="0" x2="300"y2="1380" />            </svg>            <h3>v</h3>            <span>2017！我们一起学习！一起进步</span>        </div>        <divclass="grid">            <svgwidth="100%"height="100%">                <lineclass="top"x1="0" y1="0" x2="900"y2="0" />                <lineclass="left"x1="0" y1="460" x2="0"y2="-920" />                <lineclass="bottom"x1="300" y1="460" x2="-600"y2="460" />                <lineclass="right"x1="300" y1="0" x2="300"y2="1380" />            </svg>            <h3>g</h3>            <span>2017！我们一起学习！一起进步</span>        </div>    </div></body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0