PROMULGATOR

    fly-小猛艺术

    云南省昆明市
    Html
    Css
    Js

    
                        


                        

                            


/*光标动画*/
@keyframes caret {
	50% {
	border-color:transparent;
}
}/*文本动画：从宽度为0开始*/
@keyframes text {
	from {
	width:0;
}
}.load-text {
	width:11ch;
	margin:0 auto;
	overflow:hidden;
	word-break:keep-all;
	color:#b1f1f3;
	border-right:3px solid #000000;
	font:bold 400% monospace;
	animation:caret 0.5s step-end infinite,text 5s infinite steps(11);
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
css打字效果

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
动态打字效果的本质就是p标签的宽度从0增加到文本的宽度时，其文本会逐个展示出来。那么如何控制每一次增加的正好是一个字符的宽度呢？
这就要说到两个关键的东西：font-family:monospace和ch长度单位。
monospace之前已经讲过了，而ch这个单位相信很多前端同行都没有听说过，按照标准，1ch就是当前字体环境中数字 0 的宽度，那么在字体为monospace的情况下，1ch就是所有字符的宽度。
理解了这两个东西，我们就可以在css中设置p标签的字体为monospace，同时宽度设置width:11ch，因为loading....一共有10个字符，但是关键帧应当有（0，1，2，3，4，5，……，10）一共11个，所以添加一个字符的宽度。
除了这两个关键属性外，就是样式的设置了。overflow:hidden;和word-break:keep-all;是为了防止中文字符在p标签宽度不够的情况下出现自动换行的bug。
animation:text 5s infinite steps(11);是利用了steps()值设定步长，因为一共11ch的长度，所以设定11个步长。然后设置infinite来实现无限循环。 
注意：汉字的长度是2个字符长度，设定的步长和宽度要x2。

                         

                     

                   
                


                
0