数学公式

杨帆发表于 2026-8-9 20:59

本帖最后由杨帆于 2026-8-12 19:19 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<title>数学公式</title>
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
:root{--w:300px;--h:412.8px;}
.pa{position:relative;margin:30px 0;left:calc(50% - 81px);transform:translateX(-50%);width:1280px;height:750px;color:#CCFF99;user-select:none;--state:running;}
.wrap{position:absolute;left:50%;transform:translateX(-50%);z-index:2;top:20%;transform:translate(-50%) scale(0.8);perspective:1200px;}
#items{width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;transform-origin:50% 50% 0;animation:animate00 120s linear infinite var(--state);}
#items img{width:var(--w);height:var(--h);position:absolute;top:0;left:0;border-radius:16px;border:thin blue inset;opacity:0.8;backface-visibility:hidden;background-color:#CCFFFF;}
#items img:nth-child(1){transform:rotateY(0deg) translateZ(575px);}
#items img:nth-child(2){transform:rotateY(30deg) translateZ(575px);}
#items img:nth-child(3){transform:rotateY(60deg) translateZ(575px);}
#items img:nth-child(4){transform:rotateY(90deg) translateZ(575px);}
#items img:nth-child(5){transform:rotateY(120deg) translateZ(575px);}
#items img:nth-child(6){transform:rotateY(150deg) translateZ(575px);}
#items img:nth-child(7){transform:rotateY(180deg) translateZ(575px);}
#items img:nth-child(8){transform:rotateY(210deg) translateZ(575px);}
#items img:nth-child(9){transform:rotateY(240deg) translateZ(575px);}
#items img:nth-child(10){transform:rotateY(270deg) translateZ(575px);}
#items img:nth-child(11){transform:rotateY(300deg) translateZ(575px);}
#items img:nth-child(12){transform:rotateY(330deg) translateZ(575px);}
@keyframes animate00{from{transform:rotateX(-5deg) rotateY(360deg);}to{transform:rotateX(-5deg) rotateY(0deg);}}
.carousel-wrapper{position:relative;width:100%;height:100%;margin:0px 0px;z-index:1;pointer-events:none;overflow:hidden;}
.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(1.0) contrast(1.1) saturate(1.1);transition:opacity 2.2s ease-in-out,filter 2.2s ease-in-out;will-change:opacity,filter;}
.carousel-slide.active{opacity:1.0;filter:brightness(1.0) contrast(1.1) saturate(1.2);}
.player{z-index:10;width:480px;bottom:10px;}
.btnFs{z-index:10;top:25px;right:20px;}
.pa #lrc{position:absolute;top:5%;font: bold 2.8em 'Long Cang','ZCOOL KuaiLe','Ma Shan Zheng','华文琥珀',STLiti,"宋体", "SimSun", "Microsoft YaHei", sans-serif !important;--color1: hsla(150,50%,50%,.75);--color2: hsla(270,100%,100%,.85);}
#msvg{position:absolute;z-index:15;left:45px;top:45px;width:120px;height:120px;display:block;cursor:pointer;animation:float 3s ease-in-out infinite alternate;animation-play-state:var(--state);}
@keyframes float{0%{transform:translateY(0) scale(0.8);}100%{transform:translateY(-20px) scale(1.2);}}
#msvgg{display:block;position:absolute;z-index:2;width:100%;height:auto;}
#msvgg text{font:bold 15px Sans-serif;text-anchor:middle;fill:#FFFF99;}
.vid1{position:absolute;z-index:2;opacity:0.5;pointer-events:none;object-fit:cover;object-position:center;left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to bottom,transparent 58%,red 68%);-webkit-mask:linear-gradient(to bottom,transparent 58%, red 68%);}
</style>
</head>
<body>
<div class="pa">
<video class="vid1" src="https://img2.tukuppt.com/video_show/2422006/00/02/12/5b519a8074c45.mp4" loop preload="auto" playsinline autoplay muted></video>
<div class="wrap">
<div id="items">
   <img src="https://pic1.imgdb.cn/i/0343wzDNl8G0YMkqtH0IPa.jpg" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0343xUHmTvOANV2yuZ7nEs.png" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/03444sySvh8m3Dz3UOerag.webp" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/03444szAJNbNHk3SUxy9eH.jpg" loading="lazy" alt="" />
   <img src="https://s3.bmp.ovh/2026/08/09/RlxHevAP.jpg" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0343xKHSTuh5PppC4tkCh9.jpg" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0343xNCJWaAUtCWOGdYx3C.jpg" loading="lazy" alt="" />
   <img src="https://s3.bmp.ovh/2026/08/09/RxGlyPds.jpg" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0344m3o2y9ZPxrBqAGJYqM.png" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0344m3oSPOkZ9S0A9jMBxD.png" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/0344m3nF9o1RrFC5zflduA.png" loading="lazy" alt="" />
   <img src="https://pic1.imgdb.cn/i/03444sysN7IDIIgTz0jKAb.webp" loading="lazy" alt="" />
</div>
</div>
<svg id="msvgg" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg">
<path id="tp" d="M -180 100 Q 0 -100,180 100" fill="none" stroke="none" />
<text>
<textPath href="#tp" >数学公式 <animate id="ani" attributeName="startOffset" from="120%" to="-20%" dur="8s" repeatCount="indefinite" fill="freeze" />
</textPath>
</text>
</svg>
<div class="carousel-wrapper" id="carouselWrapper">
<img class="carousel-slide active" src="https://i.uik.cc/view.php/b97ef884fb5e27537bc55aac92334557.jpg" alt="图片1" />
<img class="carousel-slide" src="https://i.uik.cc/view.php/033e976e9e1386b4ce9b1c3781fdd88f.jpg" alt="图片2" />
<img class="carousel-slide" src="https://i.uik.cc/view.php/4864718d0bed5a3bed66cc65ede0d11f.jpg" alt="图片4" />
<img class="carousel-slide" src="https://i.uik.cc/view.php/5af8ebd0ccc9e5bdd2b3139e583644f3.jpg" alt="图片5" />
<img class="carousel-slide" src="https://i.uik.cc/view.php/e0180b424cb611c9a74b4974493d24fc.jpg" alt="图片6" />
</div>
<div class="player"></div>
<div id="lrc"></div>
<svg id="msvg" viewBox="0 0 576 512">
<title id="svgTip">暂停</title>
<defs id="defs">
   <radialGradient id="grd" cx="55%" cy="45%" r="60%">
   <stop offset="0%" stop-color="#00FFFF"></stop>
   <stop offset="50%" stop-color="#6495ED"></stop>
   <stop offset="100%" stop-color="#7B68EE"></stop>
   </radialGradient>
</defs>
<path
   fill="url(#grd)"
   fill-rule="nonzero"
   d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path>
</svg>
</div>
<script>
const gc = `数学公式
数学公式
演唱：边程邓智元
首先来一起找规律
集合与函数的交集
观察图像别分心要努力
幂函数性质要记清
反函数要找定义域
解题技巧要分析是核心
WU 注意结构函数名的定义
WU 和差倍半和诱导记心里
COME ON
一起
指数和对数函数
它们互为反函数
同角关系记清楚
熟读公式是基础
赛因二倍阿尔法
等于二倍赛因
乘以考赛因阿尔法
推算过程多练习
符号看象限
奇变偶不变
化繁为简
记得要割补转换辅助线
Wow
函数一线牵
几何图形
学会仔细思量温习
证明排列组合
Wow
数形巧结合
勤学苦练
再看几次解析立体几何
验算总会有结果
万能公式总会给我们圆满的组合`;
const options = {
pa: '.pa',
urls: [
   ['https://www.joy127.com/url/157408.mp3', '数学公式']
]
};
const pa = document.querySelector('.pa');
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function () {
   if (callback) callback();
};
document.head.appendChild(script);
}

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function () {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun);
});

pa.addEventListener('contextmenu', e => e.preventDefault());

const slides = document.querySelectorAll('.carousel-slide');
let currentIndex = 0;
const totalSlides = slides.length;
const CAROUSEL_INTERVAL = 6000;
let carouselTimer = null;

function goToSlide(index) {
slides.forEach((slide, i) => slide.classList.toggle('active', i === index));
}
function nextSlide() {
currentIndex = (currentIndex + 1) % totalSlides;
goToSlide(currentIndex);
}
function resumeCarousel() {
clearInterval(carouselTimer);
carouselTimer = setInterval(nextSlide, CAROUSEL_INTERVAL);
}
function pauseCarousel() {
clearInterval(carouselTimer);
}

window.addEventListener('load',()=>{
goToSlide(currentIndex);
resumeCarousel();
})

function tzRun() {
const aud = new AudPlayer(options);
const audio = aud.aud;

const msvg = document.getElementById('msvg');
const svg = document.getElementById('msvgg');
const vid = document.querySelector('.vid1');

LRC(aud.pa, audio, gc, 0.5);

document.addEventListener('keydown', e => {
if (e.altKey && e.key.toLowerCase() === 'x') {
   e.preventDefault();
   if(audio.paused){
   svg.pauseAnimations();msvg.style.setProperty('--state','paused');
   }else{
   svg.unpauseAnimations();msvg.style.setProperty('--state', 'running');
   }
}
});

msvg.onclick = function () {
if (audio.paused) {
   audio.play().catch(() => {});
   svg.unpauseAnimations();
   vid.play().catch(() => {})
   resumeCarousel();
} else {
   audio.pause();
   svg.pauseAnimations();
   pauseCarousel();
   vid.pause();
}
svgTip.textContent = audio.paused ? '播放' : '暂停';
msvg.style.setProperty('--state', audio.paused ? 'paused' : 'running');
};

const playerWrap = document.querySelector('.aud-btn');
playerWrap.onclick = function () {
if (audio.paused) {
   svg.pauseAnimations();msvg.style.setProperty('--state','paused');pauseCarousel();

   } else {
svg.unpauseAnimations();msvg.style.setProperty('--state', 'running');resumeCarousel();

}
}
}
</script>
</body>
</html>

小辣椒 发表于 2026-8-9 22:02

杨帆这个是不是夕阳老顽童的图片转换代码制作？

小辣椒 发表于 2026-8-9 22:04

小辣椒好久没有上来了，许多效果都感觉看不明白了{:4_170:}

红影发表于 2026-8-9 22:25

哈哈，有意思，还有用数学公式做帖子的，上课的时候还没学够么{:4_173:}
很漂亮的制作，欣赏杨帆好帖{:4_187:}

杨帆发表于 2026-8-9 22:36

本帖最后由杨帆于 2026-8-9 22:45 编辑

小辣椒发表于 2026-8-9 22:02
杨帆这个是不是夕阳老顽童的图片转换代码制作？
是，帖子代码来自黑黑老师分享模版，公式图轮播来自夕阳老师分享作品，背景图轮播来自了了子老师分享作品，在此一并表示感谢{:4_190:}

杨帆发表于 2026-8-9 22:42

小辣椒发表于 2026-8-9 22:04
小辣椒好久没有上来了，许多效果都感觉看不明白了

问好小辣椒~不会看不明白的，可有空就上来看看呦{:4_187:}

杨帆发表于 2026-8-9 22:45

本帖最后由杨帆于 2026-8-9 22:49 编辑

红影发表于 2026-8-9 22:25
哈哈，有意思，还有用数学公式做帖子的，上课的时候还没学够么
很漂亮的制作，欣赏杨帆好帖{:4_1 ...
鼓捣着玩呢，谢谢影子鼓励。该贴音乐源自枫丹老师分享作品，在此一并表示感谢{:4_204:}

梦江南 发表于 2026-8-10 09:58

这就是数学老师的杰作！{:4_187:}

梦江南 发表于 2026-8-10 09:59

分享杨帆带来的精彩音画。真棒！{:4_199:}

杨帆发表于 2026-8-10 13:39

梦江南发表于 2026-8-10 09:58
这就是数学老师的杰作！

呵呵，鼓捣着玩呢，问好江南，祝开心{:4_187:}

魏淑芬 发表于 2026-8-11 14:45

哈哈，枯燥的数学公式编成歌，杨帆老师还给做成动画，太好玩儿了。欣赏点赞！

小文发表于 2026-8-11 15:05

有意义又有趣味的好贴，极欣赏！

杨帆发表于 2026-8-11 23:36

魏淑芬发表于 2026-8-11 14:45
哈哈，枯燥的数学公式编成歌，杨帆老师还给做成动画，太好玩儿了。欣赏点赞！

是，挺好玩呢，谢谢魏淑芬老师鼓励，祝开心{:4_204:}

杨帆发表于 2026-8-11 23:37

小文发表于 2026-8-11 15:05
有意义又有趣味的好贴，极欣赏！

问好小文，谢谢鼓励，祝开心{:4_190:}

红影发表于 2026-8-12 20:36

杨帆发表于 2026-8-9 22:45
鼓捣着玩呢，谢谢影子鼓励。该贴音乐源自枫丹老师分享作品，在此一并表示感谢

有意思的制作，再赏杨帆好帖{:4_187:}

雨季工作室 发表于 2026-8-13 10:10

欣赏杨帆精彩佳作。

杨帆发表于 2026-8-13 11:38

红影发表于 2026-8-12 20:36
有意思的制作，再赏杨帆好帖

欢迎影子，感谢鼓励，开心天天{:4_187:}

杨帆发表于 2026-8-13 11:39

雨季工作室发表于 2026-8-13 10:10
欣赏杨帆精彩佳作。

问好雨季，谢谢鼓励{:4_190:}

页: [1]

花潮论坛's Archiver

数学公式