词云图，随便用，做个备份
作者 ： 不良使
潜力创作新星 华为云享专家
博客记录学习的思路，项目和错误,寻找志同道合的朋友
如果觉得有帮助记得一键三连 ┗|｀O′|┛ 嗷~~
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style id="webmakerstyle">
body {
width: 100vw;
height: 100vh;
text-align: center; }
#root {
width: 100%;
height: 100%;
display: flex; }
.ball-bg {
margin: auto;
width: 300px;
height: 300px; }
.ball-bg .container {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
perspective: 1000;
animation: fullrotate 10s linear infinite; }
.ball-bg .container .point {
position: absolute;
top: 50%;
left: 49%;
transition: transform 2s;
font-size: 40px; }
.ball-bg .container.plan {
animation: unset; }
.ball-bg .container.plan .point {
transition: transform .6s;
font-size: 16px;
cursor: pointer; }
.ball-bg .container.plan .point:hover {
border-bottom: 1px solid #808080; }
.ball-bg .container.columnar {
animation: full-columnar 10s linear infinite; }
@keyframes fullrotate {
to {
transform: rotateY(360deg) rotateZ(360deg); } }
@keyframes full-columnar {
to {
transform: rotateY(360deg); } }
style>
head>
<body>
<div id="root">
<div class="ball-bg">
<div
:class="`container ${shape}`"
ref="coin"
@mouseenter="shape = 'plan';"
@mouseleave="mouseLeave"
>
<div
class="point"
v-for="(item, idx) in tags"
:key="idx"
:style="item.style"
>{{ item.text }}div>
div>
div>
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js">script>
<script src="chrome-extension://lkfkkhfhhdkiemehlpkgjeojomhpccnh/lib/transpilers/babel-polyfill.min.js">script><script>
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var app = new Vue({
el: '#root',
data: {
shapes: ['plan', 'ball', 'columnar'],
shape: 'columnar',
oldShape: 'columnar',
tags: [],
width: 200
},
watch: {
shape: function shape(val, old) {
this.oldShape = old;
this.deformation(val);
}
},
methods: {
deformation: function deformation(type) {
var _this = this;
var len = this.tags.length;
var func = null;
var random = function random() {
var min = arguments[0] || 0;
var max = arguments[1] || 0;
if (max < min) {
var _ref = [max, min];
min = _ref[0];
max = _ref[1];
}
return Math.random() * max + min;
};
if (type === 'plan') {
func = function func(i) {
var r = 0;
var d = i % 2 === 0 ? 1 : -1;
var rx = 0;
var ry = (parseInt(i / 2) + 1) * 25 * d;
var style = '';
style += 'transform: translateX(' + rx + 'px) translateY(' + ry + 'px);';
style += 'color: rgba(' + random(200) + ', ' + random(200) + ', ' + random(200) + ', 1);';
return { style: style };
};
}
// 测试
if (type === 'ball') {
func = function func(i) {
var r = _this.width / 2;
var rx = random(360);
var ry = random(360);
var style = '';
style += 'transform: rotateY(' + ry + 'deg) rotateX(' + rx + 'deg) translateZ(' + r + 'px);';
style += 'color: rgba(' + random(200) + ', ' + random(200) + ', ' + random(200) + ', 1);';
return { style: style };
};
}
// 柱状
if (type === 'columnar') {
func = function func(i) {
var r = _this.width / 2;
var d = i % 2 === 0 ? 1 : -1;
var rx = 0;
var ry = 360 / 5 * i;
var ty = i * 10 * d;
var style = '';
style += 'transform: translateY(' + ty + 'px) rotateY(' + ry + 'deg) rotateX(' + rx + 'deg) translateZ(' + r + 'px);';
style += 'color: rgba(' + random(200) + ', ' + random(200) + ', ' + random(200) + ', 1);';
return { style: style };
};
}
this.tags = [].concat(_toConsumableArray(this.tags)).map(function (item, idx) {
return _extends({}, item, func(idx));
});
},
/**
* 鼠标离开容器的方法
* 改变动画的形式
*/
mouseLeave: function mouseLeave() {
var i = this.shapes.indexOf(this.oldShape);
if (this.shapes[i + 1]) {
this.shape = this.shapes[i + 1];
} else {
this.shape = this.shapes[1];
}
}
},
created: function created() {
// this.shape(['ball', 'infinite'], 0)
// this.shape(['infinite'], 0)
this.tags = [{ text: '疫情', style: '' }, { text: '新冠', style: '' }, { text: '上海', style: '' }, { text: '抗疫', style: '' }, { text: '病毒', style: '' }, { text: '坠机', style: '' }, { text: '乌克兰', style: '' }, { text: '俄罗斯', style: '' }, { text: '生物实验室', style: '' }, { text: '制裁', style: '' }, { text: '严峻', style: '' }, { text: '奥密克戎', style: '' }];
},
mounted: function mounted() {
this.width = +this.$refs.coin.clientWidth;
this.deformation('columnar');
}
});
//# sourceURL=userscript.js
script>
body>
html>