<script>
'use strict';
const targetNodeObject = document.body;
const styleElement = document.createElement('style');
const floatBall = document.createElement('div');
let center = { centerX: 0, centerY: 0 };
const timer = 32;
styleElement.textContent = `
.highlighted-text {
width: 4px;
height: 4px;
margin: 0 2px;
display: inline-block;
overflow: hidden;
background-color: #f00;
transition: all 1s;
}
.highlighted-image {
margin: 0 2px !important;
display: inline-block !important;
overflow: hidden !important;
background-color: #000 !important;
transition: all 1s;
transform-origin: center top;
}
.floating-ball {
width: 4px;
position:fixed;
height: 100px;
background: #000 !important;
animation: floatAnimation 0.2s linear infinite;
left: 50%;
top: -800px;
transition: top 1s ease;
z-index:9999;
border:1px solid #fff;
transform-origin: center center;
}
@keyframes floatAnimation {
to {
transform: rotate(360deg);
}
}
.inhaleAnimation{
position: fixed;
z-index:9999;
animation: inhaleAnimation 2s ease-out forwards;
}
@keyframes inhaleAnimation {
to {
transform: scale(0);
}
}
`;
document.head.appendChild(styleElement);
createAttack();
// 创建进攻武器 - 棍
function createAttack(callback) {
floatBall.classList.add('floating-ball');
targetNodeObject.appendChild(floatBall);
setTimeout(() => {
floatBall.style.top = "100px";
setTimeout(() => {
if (callback) callback();
}, 1000)
}, 100)
}
</script>
这是我效果好像还不错！
现在，将上面JS代码压缩
通过在url输入框内，输入Javascrip:【上面压缩的代码】
将代码放入juejin某页，一起look下效果(截取一段)：
