1. 主题阁汉化首页
  2. 特效代码

基于canvas的动态马赛克文字特效

这是一款基于 canvas 的动态马赛克文字特效。该特效使用 canvas 在屏幕上刻画你输入的任何文字内容,效果非常炫酷。
使用方法
在 HTML 文件中引入

  1. <strong><script src=’https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js’></script>
  2. <script  src=“./js/script.js”></script></strong>

HTML 结构

  1. <input type=“text” id=“input” placeholder=“请输入内容” value=“#countdown” title=“type and press enter” />

CSS 样式

  1. #input {
  2.   positionabsolute;
  3.   bottombottom10px;
  4.   left: 50%;
  5.   width: 8em;
  6.   max-width: 80%;
  7.   backgroundnone;
  8.   bordernone;
  9.   outlinenone;
  10.   border-bottom2px solid #fff;
  11.   color#fff;
  12.   font-size: 3em;
  13.   text-aligncenter;
  14.   z-index: 999;
  15.   opacity: .25;
  16.   -webkit-transform: translateX(-50%);
  17.           transform: translateX(-50%);
  18.   transition: opacity .3s;
  19. }
  20. #input:hover, #input:focus {
  21.   opacity: 1;
  22. }
  23. body {
  24.   positionfixed;
  25.   top: 0;
  26.   left: 0;
  27.   width: 100%;
  28.   height: 100%;
  29.   margin: 0;
  30.   padding: 0;
  31.   -webkit-user-select: none;
  32.      -moz-user-select: none;
  33.       -ms-user-select: none;
  34.           user-select: none;
  35. }

Codepen 网址:https://codepen.io/edmundojr/pen/MpXVgW

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/1333.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部