盲文打字背景效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: rgb(100, 85, 135); margin: 0 auto; overflow: hidden; font-family: 'Special Elite', cursive; } p{ font-size:0.5em; } #wordsAndStuff { font-size: calc(3vw + 10px); position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); text-align: center; z-index: 50; border-radius: 5px; padding:2px; margin:2px; color:white; min-width:20px; } #wordsAndStuff:focus{ outline:0; border:1px solid white; animation:blink 2s linear infinite; } #container { height: 100vh; width: 100vw; cursor: default; } #brailleBG{ height: 100%; width: 100%; word-wrap: break-word; z-index:1; font-size:4em; color: rgb(120, 105, 155); text-shadow: 1px 2px 4px rgb(80, 65, 115), -1px -2px 4px rgb(140, 125, 175) } @keyframes blink{ 0%{ border:1px solid white; } 50%{ border:1px solid rgba(255,255,255,0); } 100%{ border:1px solid white; } } </style> </head> <body translate="no"> <div id="container"> <div id="brailleBG"></div> <div id="wordsAndStuff">The spectacle before us was indeed sublime.<br /><br /><p>Words typed here make the braille version texture the background</p></div> </div> <script> /* * Array that maps English letters * to Braille symbols. * http://symbolcodes.tlt.psu.edu/bylanguage/braillechart.html */ /* var map ={ 'a' : '⠁', 'b' : '⠃', 'c' : '⠉', 'd' : '⠙', 'e' : '⠑', 'f' : '⠋', 'g' : '⠛', 'h' : '⠓', 'i' : '⠊', 'j' : '⠚', 'k' : '⠅', 'l' : '⠇', 'm' : '⠩', 'n' : '⠝', 'o' : '⠕', 'p' : '⠏', 'q' : '⠟', 'r' : '⠗', 's' : '⠎', 't' : '⠞', 'u' : '⠥', 'v' : '⠼', 'w' : ' ⠺', 'x' : '⠭', 'y' : '⠽', 'z' : '⠵', ' ': ' ' }; */ var allofEm; function words2Braille(userText) { var userTextL = userText.toLowerCase(); //strip punctuation var punc = /[�`~\"\/'_\-[\]{}1234567890()*+!?%&.,\\^$|#@<>|+=;:\u2018\u2019\u201C\u201D]/g; var noPunc = userTextL.replace(punc,""); var words = noPunc.split(""); //remove all spaces for (var i = 0; i < words.length; i++) { if (words[i] === " ") { words.splice(i, 1); } else if (words.indexOf(words[i]) == words.length) { return false; } } allofEm = words; //replace all .........完整代码请登录后点击上方下载按钮下载查看
网友评论0