css怎么实现一条直线向右逐渐延伸显示

html-css017

css怎么实现一条直线向右逐渐延伸显示,第1张

用css3动画去做

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>00</title>

<style>

.xian{ width:50px height:1px background:#000000 margin-top:100px}

.xian{animation: myfirst 5s}

@keyframes myfirst

{

from {width: 50px}

to {width: 1000px}

}

</style>

</head>

<body>

<div class="xian"></div>

</body>

</html>

低版本浏览器不支持css3属性，用谷歌什么的高版本浏览器看。

CSS代码如下

border-bottom: 2px solid red

代码解释：

border-bottom: 表示下边框

2px:表示边框宽度

solid：实现边框

red：红色