代码：
<!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>
