Hoje, o editor irá compartilhar com vocês a décima terceira edição da série de coleção de efeitos especiais de front-end da web. Amigos que gostam de brincar com efeitos legais, por favor, dêem uma olhada ^_^.
Deixe-me compartilhar com vocês um efeito de texto de fluxo em cascata formado usando tela HTML5, que é muito legal! O código relevante é o seguinte:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>pano</title> <style> *{ preenchimento: 0;}corpo{ background:#000 ;} </style></head><body> <div id=container> <canvas id=c></canvas></div><script type=text/javascript src=http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js></script><script> var c = document.getElementById(c);var ctx = c.getContext(2d) ;//Tornar tela cheia c.height = window.innerHeight;c.width = window.innerWidth;//Caracteres chineses do conjunto de caracteres Unicode var chinês = igeekbar~;//Converter a string em um único caractere em uma matriz chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //O número de colunas na chuva//O número; de colunas em cada coluna um array var drops = [] // Abaixo estão as coordenadas x // 1 = y em drops (o mesmo inicialmente) for(var x = 0; x < columns; x++) drops[x] = 1 ; //Função de desenho draw(){ //Tela BG preta // Trilha de exibição BG semitransparente ctx.fillStyle = rgba(0, 0, 0, 0.05); altura); ctx.fillStyle = #0F0; //Cor da fonte ctx.font = font_size + px arial; drops.length; i++) { //Imprime caracteres chineses aleatórios var text = chinese[Math.floor(Math.random()*chinese.length)] //x = i*font_size, y = valor de drops[i]; * font_size ctx.fillText(texto, i*font_size, drops[i]*font_size); //Após desenhar uma linha na tela, envie-a aleatoriamente para o topo //Adicione uma aleatoriedade ao reset para que as gotas fiquem espalhadas pelo eixo if(drops[i]*font_size > c.height && Math. random( ) > 0,975) drops[i] = 0; //Aumento da coordenada Y drops[i]++;O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.