html开发工程师工资,web前端开发工程师拿着自己的项目去面试，月薪12K

前面几天碰见一个小伙，应聘web前端开发工程师的，直接给12K。

GIF【手机用户】点我查看

知识点：

综合的知识点较多，几乎没有简单布局，考验的是html5的新特性，比如动画，canvas等方面的知识，还有对于原生javascript的考究也是比较全面的，包括独立封装javascript插件，以及原生javascript设计模式思维，虽然现在HTML5的兼容比较麻烦，但是未来HTML5+javascript的配合来做特效，是不错的，比如这个特效就是原生javascript配合css！想获取源案例以及效果图可以直接找群：621071874。

源码

CSS：

@import url(https://fonts.googleapis.com/css?family=VT323);

$highlight: rgb(0,255,128);

$quoteText: darken($highlight, 40%);

$font: "M+ 1mn", "VT323", monospace;

// 获取此字体。

// 严重。这是最好的。

html {

background-color: rgb(12,10,14);

font-family: $font;

font-size: 2.2vmax;

line-height: 1.75em;

overflow: hidden;

}

.quote {

cursor: default;

color: $quoteText;

margin: 0 auto 0;

max-width: 82vw;

perspective: 1000vmin;

width: 33rem;

}

.quote span {

border-radius: 0.3em;

display: inline-block;

padding: 0 0.25em;

margin: 0.1em 0.1em;

transform: translateZ(-500vmin) rotateX(90deg);

transition:

background 2s ease-in,

color 5s ease-out,

text-shadow 0.5s ease-out,

transform 15s ease-in;

}

.quote .highlight, .quote span:hover {

background: rgba($highlight,0.1);

color: lighten($highlight,25%);

text-shadow: 0 0 0.6em rgba($highlight,1);

transform: translateZ(0) rotateX(0deg);

transform-origin: 50% 100%;

transition: all 0.3s ease-out;

z-index: 9001;

}

GIF【手机用户】点我查看

JS

var eQuote = document.querySelector("#neat");

var regex = /\ /;

//将原始段落保存为单词数组

// 正则表达式= / [。？！：)/；/ * * /取消for裁决

var aQuote = eQuote.innerHTML.split(regex);

// wrap each word with a span

eQuote.innerHTML = "";

for(var word in aQuote){

eQuote.innerHTML += "" + aQuote[word] + "";

}

// 把它们留到以后

var eWords = document.querySelectorAll("span");

var repeat = setInterval(function() {

if(Math.random() > 0.85) fClearAllHighlights(eQuote);

fHighlightRandomWord(eWords);

}, 275);

function fHighlightRandomWord (e) {

var iRandom = Math.floor(Math.random() * e.length);

e[iRandom].classList.add("highlight");

}

function fClearAllHighlights (e) {

var nlHighlights = e.querySelectorAll(".highlight");

// 转换成一个数组列表

var aHighlights = Array.prototype.slice.call(nlHighlights);

// 从具有它的跨度中删除

Array.prototype.map.call(aHighlights, function(){

arguments[0].classList.remove("highlight");

});

}

GIF【手机用户】点我查看

如有不同看法的大佬，请指出谢谢。