心态最重要
<p><iframe frameborder="0" scrolling="no" src="https://open.douyin.com/player/video?vid=7554877195232087348" style="width:960px;height:600px;"></iframe></p><p> </p>
<p> </p>
<p> </p>
<p> </p>
本文代码：
<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 loopcontrols 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}) 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}) 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 = `心态最重要
你一定要记住，
气质比年龄重要
微笑比颜值重要，
健康比身材重要，
三观比城府重要。
不管你现在什么境遇，
心态最重要。
好好爱自己，
我们一起美丽到老。
`;
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;
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> 说得真好{:4_187:}
感谢普陀申木老师带来的好帖{:4_199:} 代码制作发帖可以画面更加清晰，更加大，为什么要录屏发呢？ 欣赏老师很好的制作，以后用代码直接发吧
页:
[1]