图片/图形
基于canvas的动态马赛克文字特效
PetitQ
这是一款基于 canvas 的动态马赛克文字特效。该特效使用 canvas 在屏幕上刻画你输入的任何文字内容，效果非常炫酷。
使用方法
在 HTML 文件中引入
<strong><script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script><script src="./js/script.js"></script></strong>
也想出现在这里？联系我们吧
HTML 结构
<input type="text" id="input" placeholder="请输入内容" value="#countdown" title="type and press enter" />
CSS 样式
#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;
}
Codepen 网址：https://codepen.io/edmundojr/pen/MpXVgW
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
