概述
发现了一个好看的文字效果和背景渐变，记录下来供以后开发时参考，相信对其他人也有用。
参考资料：
JX about
一个少女心满满的例子带你入门 Canvas
源代码
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: black;
background: linear-gradient(to bottom, #dcdcdc 0%, palevioletred 100%);
}
.hidden {
visibility: hidden;
}
#box {
height: 100px;
}
#frm {
position: absolute;
height: 60%;
width: 90%;
left: 5%;
margin-top: 20px;
font-size: 2em;
font-weight: normal;
overflow: hidden;
}
#frm span {
position: relative;
text-align: center;
z-index: 1;
}
#mtxform {
position: relative;
z-index: 10;
}
.filter {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fe5757;
animation: colorChange 3s ease-in-out infinite;
animation-fill-mode: both;
mix-blend-mode: overlay;
}
@keyframes colorChange {
0%, 100% {
opacity: 0;
}
50% {
opacity: .7;
}
}
</style>
</head>
<body>
<div class="filter"></div>
<div id="box"></div>
<div id="frm"></div>
<form id="mtxform" name="mtxform">
<span id="inputext" class="hidden">
<textarea rows="6" cols="46" id="text" name="text">
!!
Javascript eXtension tools
Don't Repeat Yourself!
--by Candybullet
</textarea>
</span>
</form>
<script src="http://files.cnblogs.com/files/yangzhou33/about.js"></script>
<script type="text/javascript">
onload = function () {
document.getElementById('frm').style['height'] = document.documentElement.clientHeight - document.getElementById('box').offsetHeight + 'px';
// mtx.init( el, linesDelay, charsDelay, cText, cMatch, cGhost);
mtx.init("frm", 800, 150, [255,255,255], [255,64,0], [44,44,44]);
}
</script>
</body>
</html>