<hr style="text-align:left">或 <hr align="left">
<hr>的颜色设置
<hr style="border:0background-color:#ff0000height:1px">
如果不加border:0的话,虽然颜色改变了,但是会显示一条黑色的边框。如果不加height:1px的话,在chrome会显示不出来。
#welcome ul li em { display:blockfloat:leftheight:7pxmargin:6px 0border-right:1px solid #bcbcbcoverflow:hidden}#welcome ul li em [选择ID为welcom的容器下ul li 里的em元素为样式试用对象]
display:block[做为块元素显示]
float:left[靠左浮动,默认li元素是列显示,用了float可以让容器在一行内显示]
height:7px[高7像素]
margin:6px 0[子容器距父容器上下边框的距离分别为6像素,等同于margin:6px 0 6px 0]
border-right:1px solid #bcbcbc[容器右边框显示为1像素,实线,颜色为#bcbcbc]
overflow:hidden[超出容易可见面积部分内容不显示]
<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这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。其他代码都比较简单,不懂随时问我。
希望能够帮助到你,!