这是一款基于canvas的动态马赛克文字特效。该特效使用canvas在屏幕上刻画你输入的任何文字内容,效果非常炫酷。
在HTML文件中引入。
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="./js/script.js"></script>
<input type="text" id="input" placeholder="请输入内容" value="#countdown" title="type and press enter" />
#input { position: absolute; bottom: 10px; left: 50%; width: 8em; max-width: 80%; background: none; border: none; outline: none; border-bottom: 2px solid #fff; color: #fff; font-size: 3em; text-align: center; z-index: 999; opacity: .25; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: opacity .3s; } #input:hover, #input:focus { opacity: 1; } body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
该基于canvas的动态马赛克文字特效的codepen网址为:https://codepen.io/edmundojr/pen/MpXVgW