前面幾天碰見一個小伙左电，應(yīng)聘web前端開發(fā)工程師的廉侧，直接給12K。
知識點：
綜合的知識點較多篓足，幾乎沒有簡單布局段誊，考驗的是html5的新特性，比如動畫栈拖，canvas等方面的知識连舍，還有對于原生javascript的考究也是比較全面的，包括獨立封裝javascript插件涩哟，以及原生javascript設(shè)計模式思維索赏，雖然現(xiàn)在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;
// 獲取此字體砾赔。
// 嚴(yán)重。這是最好的青灼。
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;
}
JS
var eQuote = document.querySelector("#neat");
var regex = /\ /;
//將原始段落保存為單詞數(shù)組
// 正則表達(dá)式= / [暴心。？Ｔ硬Α：）/专普；/ * * /取消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");
// 轉(zhuǎn)換成一個數(shù)組列表
var aHighlights = Array.prototype.slice.call(nlHighlights);
// 從具有它的跨度中刪除
Array.prototype.map.call(aHighlights, function(){
arguments[0].classList.remove("highlight");
});
}
如有不同看法的大佬，請指出謝謝弹沽。
