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

html-css06

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属性，用谷歌什么的高版本浏览器看。

<pre t="code" l="html"><!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px

height:100px

background:red

position:absolute

animation:myfirst 5s

-webkit-animation:myfirst 5s

animation-fill-mode: forwards

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:redleft:500pxbottom:50px}

25% {background:redleft:500pxheight:130pxbottom:50px}

50% {background:redleft:500pxheight:160pxbottom:50px}

75% {background:redleft:500pxheight:190pxbottom:50px}

100% {background:redleft:500pxheight:210pxbottom:50px}

}

</style>

</head>

<body>

<div></div>

</body>

</html>这只是个演示的demo，方法就是这样，animation-fill-mode: forwards这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。

希望能够帮助到你，！

1、@keyframes规则。from{属性：值}  to{属性：值}。

2、0%{属性：值} 100%{属性：值}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。

3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。

4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。

5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。

6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。

扩展资料

animation 属性是一个简写属性，用于设置六个动画属性：

1、animation-name

规定需要绑定到选择器的 keyframe 名称。

2、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

3、animation-timing-function

规定动画的速度曲线。

4、animation-delay

规定在动画开始之前的延迟。

5、animation-iteration-count

规定动画应该播放的次数。

6、animation-direction

规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。