最终效果截图:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
html {
height: 100%;
background: #041720;
font-family: cursive;
}
</style>
</head>
<body>
<script>
; (function (win, dom) {
/**
* [WordCloud 字符云]
* @param {[type]} option [配置项]
*/
var WordCloud = function (option) {
var default_option = {
total: 100,//字符数量
interval: 20,//动画刷新时间间隔(ms)
speed: 2,//旋转速度
fontMinSize: 16,//字体最大尺寸(px)
fontMaxSize: 60,//字体最大尺寸(px)
text: '有一天或许这就是纪念' //文本内容
};//默认配置
this.option = Object.assign(default_option, option);//配置项定义
this.init();//初始化
this.animate();//动画
}
WordCloud.prototype = {
init() {
var w = win.outerWidth, h = win.outerHeight;
var o = this.option;
var total = o.total, fontMinSize = o.fontMinSize, fontMaxSize = o.fontMaxSize, text = o.text, wordIndex = 0;
while (total--) {
var _ele = dom.createElement("div");
_ele.className = "wordcloud2018";
_ele.innerHTML = text.charAt(wordIndex++ % text.length);
_ele.style.color = '#' + ('000000' + Math.floor(Math.random() * (1 << 24)).toString(16)).slice(-6);
_ele.style.fontSize = fontMinSize + Math.random() * (fontMaxSize - fontMinSize) + "px";
_ele.style.position = "fixed";
_ele.style.left = Math.random() * w + "px";
_ele.style.top = Math.random() * h + "px";
_ele.style.transform = `rotateX(${Math.random() * 360}deg) rotateY(${Math.random() * 360}deg) rotateZ(${Math.random() * 360}deg)`;
dom.body.appendChild(_ele);
}
},
animate() {
var o = this.option;
var interval = o.interval, speed = o.speed;
var _eles = dom.getElementsByClassName("wordcloud2018");
setInterval(function () {
[].forEach.call(_eles, function (_ele, i) {
var strs = _ele.style.transform.split("(");
var rx = strs[1].slice(0, strs[1].indexOf("deg")) * 1 + speed,
ry = strs[2].slice(0, strs[2].indexOf("deg")) * 1 + speed,
rz = strs[3].slice(0, strs[3].indexOf("deg")) * 1 + speed;
_ele.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
});
}, interval);
}
}
win.WordCloud = WordCloud;
})(window, document);
var _wordCloud = new WordCloud({ total: 91, interval: 20, text: 'qwertyuiopasdfghjklzxcvbnm' });//创建实例
</script>
</body>
</html>