大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说js文字特效（js段落文字特效）,希望您对编程的造诣更进一步.
很多人有疑问了，一个20K能写出什么样的特效？上图说话
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 += “<span>” + aQuote[word] + “</span>”;
}
// 把它们留到以后
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【手机用户】点我查看
如有不同看法的大佬，请指出谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/30581.html
