心态最重要

普陀申木 · 发表于 2025-9-28 05:08

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

普陀申木 · 发表于 2025-9-28 05:19

本文代码：
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --ma-size: 12%; background: var(--bg); position: relative; --bg: url('https://upfile.mp3.wf/view.php/fef4e32d0c8ec8004a5c8d12aa36bd4c.jpg') no-repeat center/cover; --bg1:none; user-select: none;background-blend-mode: darken;}
#pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); -webkit-mask:linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
#ma { left: 1%; top: 1%; display: grid; place-items: center; opacity: 0;}
#ma:hover {transform: scale(1.1);}
#pa:hover #ma {opacity: .9;}
.son { position: absolute; width: 15%; height: 80%;}
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(LightGreen,transparent, cyan, BlueViolet,Gold 25%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); }
.son:::before { transform: scale(-1); }
.son::after { top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: DarkOrange; transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 0 2px Gold; }
.son:nth-of-type(2) { transform: rotate(90deg); }
.son:nth-of-type(3) { transform: rotate(45deg); }
.son:nth-of-type(4) { transform: rotate(135deg); }
#lrc { position: absolute; left:35%; bottom:5%; font: bold 2.8em STZhongsong; color: #fcedbb; text-shadow: 1px 1px 2px Gold; opacity: .9;}
#lrc::before { background: linear-gradient(45deg, Gold, GreenYellow);background-clip: text;  }
#btnFs { right: 30px; top: 30px; font: bold 18px/1.5 Arial; color: #fff; }
#canvas { position: absolute; left: 5%;top: 100%; width:1250px; height:250px; transform:translateY(-53%); }
#aud { visibility: hidden; }
</style>
<div id="pa">
<audio id="aud" class="audio" src="https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/c661b2d7c060901c/B心态最重要.mp3" autoplay loop  controls crossOrigin="anonymous"></audio>
<video class="pd-vid " src="https://img.tukuppt.com/video_show/3670683/00/02/09/5b508a5b45fa7.mp4" autoplay loop muted></video>
<div id="ma" class="invert">
<div class="son"></div>
<div class="son"></div><div class="son"></div>
<div class="son"></div>
</div>
<div id ="lrc"></div>
<canvas id="canvas" ></canvas> </div>
<script>
var per = -2, step = 0.5, aniCounter = 0, raf;
var pics = ['https://pic1.imgdb.cn/item/68c3ed0058cb8da5c8a16dd2.jpg',
'https://pic1.imgdb.cn/item/68c3ed0858cb8da5c8a16de8.jpg',
'https://pic1.imgdb.cn/item/68c3ed0758cb8da5c8a16de5.jpg',
'https://pic1.imgdb.cn/item/68c3ed0158cb8da5c8a16dd7.jpg',
'https://pic1.imgdb.cn/item/68c3ed0058cb8da5c8a16dd1.jpg',
'https://pic1.imgdb.cn/item/68c3ed8658cb8da5c8a16e8b.jpg',

];
ma.onanimationiteration = () => {
var angle = aniCounter % 8, picIdx = aniCounter % pics.length;
pa.style.setProperty('--a', `${90 + (angle * 45)}deg`);
pa.style.setProperty('--bg1', `url(${pics[picIdx]}) no-repeat center/cover`);
picIdx = (picIdx + 1) % pics.length;
aniCounter ++;
changePic();
};
function changePic() {
if (per > 100) {
cancelAnimationFrame(raf);
per = -2;
var picIdx = aniCounter % pics.length;
picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
pa.style.setProperty('--bg', `url(${pics[picIdx]}) no-repeat center/cover`);
} else {
per += step;
pa.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(changePic);
}
}
ma.onmousemove = () => {
ma.title = document ? '播放/暂停' : '';
ma.style.cursor = document ? 'pointer' : 'default';
}
</script>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
      import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
var geci = `[00:00.00]心态最重要
[00:01.85]你一定要记住，
[00:03.09]气质比年龄重要
[00:06.19]微笑比颜值重要，
[00:09.07]健康比身材重要，
[00:12.31]三观比城府重要。
[00:15.08]不管你现在什么境遇，
[00:18.05]心态最重要。
[00:21.59]好好爱自己，
[00:23.44]我们一起美丽到老。
[00:27.14]

`;
FS(pa, ma);
lrc(pa, geci);
</script>
<script>
window.onload = function () {
   var oAudio = document.getElementById('aud');
   var oCtx = new AudioContext();
   var audioSrc = oCtx.createMediaElementSource(oAudio);
   var analyser = oCtx.createAnalyser();
   audioSrc.connect(analyser);
   analyser.connect(oCtx.destination);
   var ctx = canvas.getContext('2d');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   var oW = canvas.width;
   var oH = canvas.height;
   var color1 = ctx.createLinearGradient(oW / 2, oH / 2- 2, oW / 2, oH / 2- 95);
   var color2 = ctx.createLinearGradient(oW / 2, oH / 2+2, oW / 2, oH / 2+95);
   color1.addColorStop(1, '#ffffff');
   color1.addColorStop(0, '#fff000');
   color1.addColorStop(0, '#00ff00');
   color2.addColorStop(0, '#ffffff');
   color2.addColorStop(0, '#fff000');
   color2.addColorStop(1, '#00ff00');
   var count = 90;
   var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
   function draw() {
      analyser.getByteFrequencyData(voiceHeight);
      var step = Math.round(voiceHeight.length / count);
      ctx.clearRect(0, 0, oW, oH);
      for (var i = 0; i < count; i++) {
      var audioHeight = voiceHeight[step * i];
      ctx.fillStyle = color1;
      ctx.fillRect(oW / 2 + (i * 5), oH / 2, 2, -audioHeight);
      ctx.fillRect(oW / 2 - (i * 5), oH / 2, 2, -audioHeight);
      ctx.fillStyle = color2;
      ctx.fillRect(oW / 2 + (i * 0), oH / 2, 0, audioHeight);
      ctx.fillRect(oW / 2 - (i * 0), oH / 2, 0, audioHeight);
      }
      window.requestAnimationFrame(draw);
   }
   draw();
}
</script>