学而时习之,不亦乐乎。
html<div id="sakana-widget" style="position: fixed;bottom: 60px;right:40px;"></div>
<script>
function initSakanaWidget() {
new SakanaWidget({ autoFit: true }).setState({ i: 0.001, d: 1 }).mount('#sakana-widget');
}
</script>
<script
async
onload="initSakanaWidget()"
src="static/config/sakana.min.js"
></script>
<img id="author-card" ></img>
<script>
window.onload = function() {
// 创建外层的 div 元素
const newDiv = document.createElement('div');
newDiv.className = 'hidden lg:block flex-shrink-0 flex-grow-0 vanblog-sider w-52';
newDiv.style.width = '400px'; // 设置宽度
newDiv.style.marginRight = '10px'; // 设置右边距
// 创建内层 div,包含图片并设置属性
const authorCardDiv = document.createElement('div');
authorCardDiv.id = 'author-card';
authorCardDiv.className = 'sticky side-bar no-submenu side-bar-not-top side-bar-unpinned headroom--bottom';
// 创建 img 元素并设置属性
const img = document.createElement('img');
img.src = 'https://xialiu.cn/api/dan/';
img.alt = 'Image';
img.style.borderRadius = '20px';
// 将 img 添加到 authorCardDiv
authorCardDiv.appendChild(img);
// 将 authorCardDiv 添加到 newDiv
newDiv.appendChild(authorCardDiv);
// 找到要插入的父元素
const parentDiv = document.querySelector('.flex.mx-auto.justify-center');
// 将 newDiv 插入到父元素的开头
if (parentDiv) {
parentDiv.insertBefore(newDiv, parentDiv.firstChild);
}
};
</script>
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='别走嘛,我会想你的';}else{document.title='回来啦!爱你哟~'}});</script>
<title>木白广木林 </title>
<!-- 星星特效 -->
<div id="stars"></div>
<script>
(function () {
let starsCount = 521; //星星数量
let distance = 800;//间距
let parentStarts = document.getElementById("stars");
for (let i = 0; i < starsCount; i++) {
//封装一个函数 执行异步操作
(function(i){
setTimeout(function(){
let childStart = document.createElement("div");
childStart.setAttribute("class", 'star');
parentStarts.appendChild(childStart);
let item = parentStarts.children[i];
let speed = 0.2 + (Math.random() * 1);
let thisDistance = distance + (Math.random() * 300);
// console.log(parentStarts);
// console.log(i);
item.style.transformOrigin = "0 0 " + thisDistance + "px";
item.style.transform = "translate3d(0,0,-" + thisDistance + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + speed + "," + speed + ")";
},1000*i)
})(i)
}
})();
</script>
<style>
/*星星特效背景*/
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
background-attachment: fixed;
/* 阻止用户代理表 */
margin: 0 !important;
}
@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
#stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: fixed;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 60s infinite linear;
bottom: 0;
z-index: 0;
}
.star {
width: 2px;
height: 2px;
background: #f7f7b8;
position: fixed;
top: 0px;
left: 0;
backface-visibility: hidden;
}
</style>
提示
小bug:跳转后组件会消失
More info call: 微信/企业微信/钉钉/QQ/手机号:183****6036
本文作者:木白非白
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!