In fact, this effect with CSS3 animation can do, but here is familiar with the operation of JS!
As follows:
HTML section:
<Divclass= "box"> <DivID= "Shengjiang"> <P><spanColor= "#ff0">Line of text</span></P> </Div></Div>
. box this layer of div can not be added, this is just as the parent element of the father of the son! Of course, the browser as a parent element is also possible, just want to set up in other div in trouble.
CSS section:
*{margin:0;padding:0;}. Box{position:relative;margin:100px;Border:1px solid #ccc;width:200px;Height:500px; }#shengjiang{position:Absolute;Color:#000; }
If it is CSS3, just replace it with the following.
*{margin:0;padding:0;}. Box{position:relative;margin:100px;Border:1px solid #ccc;width:200px;Height:500px; }#shengjiang{position:Absolute;Color:#000;Animation:Mymove 5s Infinite; }@keyframes Mymove{0% {Top:0px;}50%{Top:200px;}100%{Top:0px;} }
Animated properties of ANIMATION,CSS3
The name of the Mymove definition, which can be customized.
5s Time required
Infinite cyclic repetition
@keyframes Mymove Add an animated property to the name defined above.
That is, 0% when the position, 50% when the location, 100% when the location.
0-100% can be arbitrarily separated from each other.
Top is from 0 to 200px and back to 0;
JS part, although to here has reached the effect of said ...
varStep = 4; functionAnim (x, y) {//x is the apex and y is the bottomdocument.all["Shengjiang"].style.top=x+ "px";//Initial top position if(x>=y) {step=-4;//a negative value is reached at the bottom, and the value indicates that the moving pixel is reduced by 4 pixels when the settimeout is executed, and the larger the value, the greater the distance to move. It also appears faster each time it is called. } if(x<0) {//0 of this line represents a relative height to the display window (parent of the child's absolute parent)Step = 4;//If the specified height is reached, the value is positive, that is, the increased parameter moves down} setTimeout (' Anim (' + (x+step) + ', ' +y+ ') ', 35);//wait a few seconds to execute, so the smaller the number the faster the faster //} anim (5,200);//5 is only the initial position, 200 is the overall height, as to how to confirm the top, but also see if (x<0) {step = 4;} The value of 0 in the x<0.
JS Text Lifting Effect