前端页面特效笔记

最新推荐文章于 2024-09-12 16:41:01 发布

wjd1994

最新推荐文章于 2024-09-12 16:41:01 发布

阅读量308

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wjd1994/article/details/80136854

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

http://strml.net/

<!doctype html>
<html>
<head>
文字输出特效
<style>
.top{

border-style:solid;
border-width:2px;

}
</style>
</head>
<body>
<div class = "top">
<p id="2"></p>
</div>
<script>
var str = "大家好，我是东方，现在我们看到的是\n文字逐个输出的效果";
var index = 0;
function type(){
	var elem1 = document.getElementsByClassName("top");
	//elem1[0].setAttribute('style', 'width: 100px !important');
	var elem = document.getElementById("2");
	elem.innerText = str.substring(0,index++);
	if(index == 6)
		elem.style.color = "white";
	if(index == 6){
		elem1[0].setAttribute('style', 'background-color:#252424; width: 50%');
	}
	
}

setInterval(type,150);
</script>
</body>
</html>

/*
大家好，大家好
我来给大家写一个简历        
白色的背景搭配黑色的字体似乎有点单调，我们换个背景
*/
html{
background:rgb(63,82,99);
}
\t
/*
接着我们先画一个边框
*/
.top{
border-style:solid;
border-width:2px;
width:100%;
}
\t
/*
然后我们加个背景
*/
.top{
background:black;
}
\t
/*
有没有发现现什么，没错，这就是我们的控制台界面，后面我们将在这里输入各种命令执行
我们把它移动到右边
*/
.top{
position:absolute;
right:10px;
}
\t
/*
然后旋转一点角度
*/
.top{
-webkit-transform:rotateY(-15deg);
-webkit-transform-origin:right;
}
 \t
 /*
 我们给自己准备一个输入框
 */
 .center{
 width:50%;
 height:50%;
}
 \t
  
 \t

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="java.io.*" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Insert title here</title>
<style>  
html{  
  
}  
body{  
-webkit-perspective:1000px;  
}  
.top{  
  
overflow-y:auto;  
  
  
}  
.bottom{  
position:absolute;  
bottom:10px;  
}  
</style>  
</head>
<body>
<div class="top">  
</div>  
<div class="center">
</div>
<div class="bottom">  
</div> 
<% 
String s0 = "";
String ss = "";
String s1 = "";
try{
	File f = new File("C:/Users/chenb/Desktop/java/c_web/WebContent/file/test1.txt");
	File f1 = new File("C:/Users/chenb/Desktop/java/c_web/WebContent/file/test2.txt");
	FileInputStream fin = new FileInputStream(f);
	BufferedReader br = new BufferedReader(new FileReader(f));
	BufferedReader br1 = new BufferedReader(new FileReader(f1));
	byte []buf = new byte[4096];
	int len = 0;
	while((len=fin.read(buf))!=-1){
		ss += new String(buf,0,len);
	}
	String line;

	while((line=br.readLine())!=null){
		s0 += line;
		s0 += "\\n";
	}
	while((line=br1.readLine())!=null){
		s1 += line;
		s1 += "\\n";
	}
	//out.println(s0);
	fin.close();
	br.close();
}catch(Exception e){
	out.println("error");
}
//out.println(ss.length());


%>


<script>
var height = window.innerHeight;
var width = window.innerWidth;
var elem = document.getElementsByClassName("top");
var elemcenter = document.getElementsByClassName("center");
var elembottom = document.getElementsByClassName("bottom");  
var index = 0; 
var str1 = "<%=s0%>";



//var str_0 = "/*大家好，大家好\n我来给大家写一个简历        \n噢，白色的背景搭配黑色的字体似乎有点单调，我们换个背景*/<span style='color:red'>html{\nbackground:rgb(63,82,99);\n}</span>\n\t/*接着我们先画一个边框*/.top{\nborder-style:solid;\nborder-width:2px;\nwidth:100%;\n}\n\t/*然后我们加个背景*/\t然后我们移动到右边\n\t然后我们旋转一点角度 \t";  
var str_0 = str1;
var style_s0 = "<span style='color:#E69F0F'>";
var style_s1 = "<span style='color:#64D5EA'>";
var style_s2 = "<span style='color:#BE84F2'>";
str_0 = str_0.replace(/\n/g,"<br>");
str_0 = str_0.split(":").join("</span><span style='color:#F92772'>:</span>"+style_s2);
str_0 = str_0.split("*/<br>").join("*/<br>"+style_s0);
str_0 = str_0.split("{<br>").join("{<br>"+style_s1);

str_0 = str_0.split(";<br>").join("</span>;<br>"+style_s1);
str_0 = str_0.split(";<br>"+style_s1+"}").join(";<br>}</span>");
//alert(str_0);
var str0 = str_0.split('\t');  
function sleep(d){  
    var t = Date.now();  
    while(Date.now() - t <= d);  
}
 
var str=str0[0];  
var aindex = 0;  
var flag = 0;  
function type(){
    if(str[index]=='<'){
	index+=3;  
	//alert(str[index]);
    }
    str00 = str.substring(0,index);  
    elem[0].innerHTML = str00;  
    //添加一个背景  
    if(aindex==0 && index==str.length){  
        aindex++;  
        sleep(500);  
        document.body.style.background="rgb(63,82,99)";  
        str += str0[aindex];  
    }  
    //画一个边框  
    if(aindex==1 && index==str.length){  
        aindex++;  
        str+=str0[aindex];  
        sleep(500);  
        var s = 'border-style:solid;border-width:2px;width:100%;';  
        elem[0].setAttribute('style',s);  
        sleep(500);  
        var ii = [];  
        for(var i = 0;i < 60; i+=1){  
            ii[i] = 100-i;  
        }  
        var j = 100;  
        var shuo_ = setInterval(shuo,12);  
        function shuo(){  
            var height_ = j*height/100; 
            var s = 'border-style:solid;border-width:2px;width:'+j+'%;height:'+height_+'px';  
            j-=2;  
            elem[0].setAttribute('style',s);  
            //var s0 = j+'%';  
            //elem[0].style.height=s0;  
            if(j <= 40){  
                window.clearInterval(shuo_);  
            }     
        }  
          
        //elem[0].setAttribute('style','width:40%');  
    }  
    //添加背景  
    if(aindex==2 && index==str.length){  
        aindex++;  
        str+=str0[aindex];  
        //sleep(500);  
        //elem[0].setAttribute('style','border-style:solid;border-width:2px;width:90%');  
        
        elem[0].setAttribute('style','background-color:black;border-style:solid;border-color:white;border-width:2px;width:40%;height:'+0.4*height+'px'); 
        elem[0].style.color="#857F6B" ; 
    }  
    //移动到右边  
    if(aindex==3 && index==str.length){  
        aindex++;  
        str+=str0[aindex];  
        sleep(500);  
        var j = window.innerWidth-elem[0].offsetLeft-elem[0].offsetWidth;  
        function shoppingcat(){ 
        	
            var s = 'background-color:black;border-style:solid;border-color:white;border-width:2px;width:40%;height:'+0.4*height+'px;position:absolute;right:'+j+'px';  
            j-=25;
            
            //elembottom[0].innerHTML = j;  
            elem[0].setAttribute('style',s);  
            elem[0].style.color="#857F6B" ; 
            if(j <= 0){  
                window.clearInterval(shop);  
            }     
        }  
        var shop = setInterval(shoppingcat,2)  
    }  
    if(aindex==4 && index==str.length){  
        aindex++;  
        str+=str0[aindex];  
        sleep(500);  
        elem[0].setAttribute('style','background-color:black;border-style:solid;border-color:white;border-width:2px;width:40%;height:'+0.4*height+'px;position:absolute;right:0px;-webkit-transform:rotateY(-15deg);-webkit-transform-origin:right;');  
        elem[0].style.color="#857F6B" ;  
          
        //elem[0].style.width='30%';      
    }  
     
    if(aindex==5 && index==str.length){  
        aindex++;  
        str+=str0[aindex];  
        str+="<br>/*<br>现在开始写简历<br>*/";  
        var index1 = 0;  
          
        function type1(){  
            elembottom[0].innerText = str.substring(0,index1++);  
        }  
        var index_70 = 40;  
        sleep(500);  
        function shuo_70(){  
            elem[0].style.height = index_70*height/100+'px';  
            if(index_70>=90){  
                window.clearInterval(shuo_70_);  
            }  
            index_70+=2;  
        }  
        var shuo_70_ = setInterval(shuo_70,50);  
        //setInterval(type1,50);  
    }  
    if(aindex==6 && index==str.length){
    	aindex++;
    	str+=str0[aindex];
    	window.clearInterval(type_);
    	var elem1 = document.createElement("div");
    	elem1.setAttribute('style','border-style:solid;border-width:2px;postion:absolute;left:0px;backgroundcolor:white;');
    	elem1.style.width=width*0.5+"px";
    	elem1.style.height=height*0.5+"px";
    	
    	var str_content = "<%=s1%>";
    	var index_content=0;
    	function content_type(){
    		elem1.innerHTML = str_content.substring(0,index_content++);
    		if(index_content==str_content.length){
    			window.clearInterval(content_type);
    			//alert("ok");
    			
    			str+="<br>/*现在我们调一下格式*/<br>";
    			
    			function append_type(){
    				elem[0].scrollTop = elem[0].scrollHeight; 
    				if(index == str.length){
    					window.clearInterval(append_type_);
    					elem1.setAttribute('style','background-color:black;border-style:solid;border-color:white;border-width:2px;width:50%;height:'+0.5*height+'px;position:absolute;left:0px;-webkit-transform:rotateY(15deg);-webkit-transform-origin:left;');  
    				}
    				elem[0].innerHTML = str.substring(0,index++);
    				
    			}
    			var append_type_ = setInterval(append_type,50);
    		}
    	}
    	var content_type_ = setInterval(content_type,50);
    	elemcenter[0].appendChild(elem1);
    }
    if(aindex==7 && index==str.length){
    	aindex++;
    	str+=str0[aindex];
    	
    }
    elem[0].scrollTop = elem[0].scrollHeight; 
    if(flag==0)  
        index++;  
      
}  
var type_ = setInterval(type,10);  
</script>  
</body>
</html>