CSS3 line around Happy +jquery typewriter effect

Original address: CSS3 line around happy +jquery typewriter effect

There is a picture of the truth, today by chance to see an effect, carefully looked at the next, found that it is a CSS clip+css3 animation implementation, simply Diao. So I brought the typewriter effect that I wrote a while ago, merge together, a little tidy down.

Click here (Chrome browser): View Demo

First of all, this line, we will see it is 2, in fact, a four-week border has a regular display of hidden, then this is bound to think of after,before properties, we will consider after the first.

First create a box, then after a border

1 <  class= "box"></div>

1 . Box:before{2 content:"';3 position:Absolute;4 width:206px;Height:206px;Border:2px Red Solid;5  Left:-5px;Top:-5px;6 Z-index:1;7}

The next thing to do is let it have a regular display hidden on it, here to use the clip properties, I have this article: CSS3 Round percent progress bar implementation principle.

Here's how we do this, first I want to let this show the top border-left-bottom-right, so there is a loop. According to Clip,rect (top, right, bottom, left), such as the display of the top border, then is:

Clip:rect (0px,210px,1px,0px);

We just need to use the animation to show it in turn, OK.

@-webkit-keyframes Clipme {0%{clip: rect (0px, 210px, 2px, 0px);} 25% { clip: rect (0px, 2px, 210px, 0px);} 50% { clip: rect (208px, 210px, 210px, 0px);} 75% { clip: rect (0px, 210px, 210px, 208px);} 100% { clip: rect (0px, 210px, 2px, 0px);} }

Then the call in after is displayed:

. Box:after {-webkit-animation:CLIPME 8s linear infinite;}

Of course, we add an identical before is OK, their time interval is 4s, here to note, if you are delayed 4s, then you will see in 4s is the entire border appears, here to delay -4s, this problem will be solved perfectly.

. Box:before {-webkit-animation:clipme 8s-4s linear infinite;}

/***************************************************************/

The typewriter, then, is nothing more than a constant substitution of display characters on the screen,

Get the contents of box first,

<div class= "box" ><span> /* * Only fun, then eggs * */ </span><p>login:jmingzi</p><p>password: ******</p><p>access is granted </p><span>welcome ymblog.net!</span></div>

Get to replace the display again later,

var t = setinterval (function () {str = CON.SUBSTR (0, strlen) + "_"; me.obj.html (str);//The content is printed if (strlen = = con.length) { Clearinterval (t);} strlen = strlen + 1;}, me.speed);

Here I just encapsulate it as a class that is easy to initialize with some parameters, complete code:

//Initialize your work, get a few pieces of text, hide them and show them individually$(function(){functionType (obj, speed, welcome) { This. obj =obj; This. Speed =Speed ; This. Welcome =Welcome;} Type.prototype={init:function(){varstr = This. obj.html (); This. obj.html ( This. Welcome); This. Add (str);},add:function(Con) {varme = This;varstr;varstrlen = 0;vart = setinterval (function() {str= Con.substr (0, strlen) + "_"; me.obj.html (str);//Content Print Completeif(strlen = =con.length) {clearinterval (t);} Strlen= strlen + 1;}, Me.speed);}}varA =NewType ($ ('. Box '), 200, ' initializing ... '); A.init ();});

You can also click on the lower right corner to view the demo, right button to view the source.

Code word is not easy, reproduced please indicate the source, thank you!

CSS3 line around Happy +jquery typewriter effect