css3 实现线条两端渐变效果

html-css017

css3 实现线条两端渐变效果,第1张

接触了一个css3效果,记录下来，方便以后使用，在实践中学点新知识，共勉！！

html标签

css样式

展现结果

最简单的用 横竖线可以用hr实现 还有border，outline 配合新属性border-image 可以做边框环绕，其他复杂线条可以用 canvas svg 画出。宁外用table和 多栏布局 也可以做出边线效果。

<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这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。

希望能够帮助到你，！