看到这个标题，想必大家都有兴趣的，今天给大家分享一个不正经的输入框。废话少说，先上效果
代码奉上：
骚气的input
* {
margin: 0;
padding: 0;
}
body {
font-size: 30px;
}
canvas {
position: absolute;
top: 20px;
}
div {
width: 350px;
margin: 100px auto;
position: relative;
}
input {
width: 100%;
height: 30px;
position: absolute;
background: transparent;
border: none;
border-bottom: 2px solid #a0a0a0;
outline: none;
font-size: 30px;
}
.placeholder {
display: inline-block;
position: absolute;
top: -10px;
transition: .4s;
color: #ddd;
}
请输入内容...
var input = document.querySelector('input');
var span = document.querySelector('.placeholder');
input.addEventListener('focus', function () {
if (input.value.length <= 0) {
span.style.transform = 'scale(.8) translate(-20px,-30px)';
animate(false);
}
});
input.addEventListener('blur', function () {
if (input.value.length <= 0) {
span.style.transform = 'none';
animate(true);
}
});
function animate(isBack) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
if (!this.border) {
this.border = 1;
input.style.borderBottom = 'none';
}
var width = canvas.width,
height = canvas.height;
var m = Math;
var scale = 50;
var ang = 0,
value = height * .6;
var deg = m.ceil(width / m.PI * 4),
k = isBack ? -12 : 12;
input.style.borderBottom = 'none';
var t = setInterval(function () {
ang += k;
context.clearRect(0, 0, width, height);
context.beginPath();
for (var i = 0; i < deg; i++) {
context.lineTo(m.PI * i / 180 * scale, .3 * m.sin(m.PI * (i - ang) / 180) * scale / 2 + value);
}
context.stroke();
if (m.abs(ang) > width) {//动画完成。重新绘制线条。
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, value);
context.lineTo(width, value);
context.strokeStyle = '#000';
context.stroke();
clearInterval(t);
}
}, 20);
}
不得不说，html5 canvas太棒了，给了前端充分的想像，结合数学，给我们意想不到的惊喜。 运用canvas最基础的API,简单的三角函数，可视化数学之美。
下面进行技术总结：
1、通过正弦曲线生成N个点，然后通过context.lintTo把所有的点连接起来，形成一个正弦曲线，我们都知道，正弦曲线表达式为：y = sin(x); 主的取值为[-1,1]，如果我们在sin前面*一个系数，比如：y=4*sin(x);则表示增大波峰。即上下摆动的幅度增加了4倍。
2、canavs动画的基本原理：画了擦，擦了再画。
3、不要给canvas设置width,height的样式，要用JS 动态设置，用CSS设置的在绘制一些基本图形的时候可能会变形，大家不妨可以试试。