天边 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

杨帆发表于 2026-9-20 20:00

天边

本帖最后由杨帆于 2026-9-20 21:35 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<metaname="referrer" content="never">
<title>天边</title>
<style>
@import url("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");
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6a44fb8ed82989bc6aad93ac.jpg') no-repeat center/cover; color: lightgreen; --state:running;--clipPath:'';}
.player { width: 480px; bottom: 10px;color:lightgreen;z-index:20; }
.btnFs { top: 25px; left: 20px;z-index:20; }
#playBtn{position: absolute;cursor: pointer;right:5%;bottom:5%;z-index: 100; width: 100px;height: 100px;background: radial-gradient(gold,GreenYellow,red);opacity: .6;transform: rotate(30deg);clip-path: var(--clipPath);animation: rotate 10s linear infinite var(--state);}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); }}
#pic { position: absolute; left: 80px; top: 50px; width:400px; height: 250px; mix-blend-mode: multiply; mask-image:radial-gradient(black 30%, transparent 70%); -webkit-mask-image:radial-gradient(black 30%, transparent 70%); z-index:5; }
.vid{position:absolute;top:0%;left:0%;width: 100%;height:100%;object-fit:cover;opacity:1;z-index:2;pointer-events:none;}
.xiewen { position: absolute; display: block;left:75%; top:15%; width: 330px; z-index:10; height: 250px; line-height: 250px; font-family:"Microsoft YaHei",STLiti,"华文楷体","SimSun", '宋体'; font-size: 3.8em; font-weight: 900; text-align: center; background: darkgreen linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 75%, transparent 0); background-size: 4px 4px; writing-mode: vertical-rl; letter-spacing: 22px; text-orientation: mixed; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #99CC00; animation: wenzi 6s linear infinite alternate var(--state),scale 12s ease infinite alternate var(--state); }
@keyframes wenzi { 0%{opacity: 0.9;} 100% { opacity: 0.5; } }
@keyframes scale{ 0%{transform: perspective(800px) rotateY(0deg) scale(0.01);} 20%{transform: perspective(800px) rotateY(0deg) scale(1);} 40%{transform: perspective(800px) rotateY(-2deg) scale(1.2);} 60%{transform: perspective(800px) rotateY(2deg) scale(1.2);} 80%{transform: perspective(800px) rotateY(0deg) scale(1);} 100%{transform: perspective(800px) rotateY(0deg) scale(0.01);}}
</style>
</head>
<body>
<div id="pa" class="pa">
<div class="xiewen">天边</div>
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop muted></video>
<video class ="vid" src="https://media-volc.jianpian.info/2769333/article/20260719/db33c86ec22f4fb1a515d2feab5c1e9c.mp4" autoplay loop preload="auto" playsinline muted></video>
<img id="pic" src="https://pic1.imgdb.cn/item/6a543dd54893f89183bb4de4.gif" alt="" />
<div id="playBtn" title="播放/暂停"></div>
</div>
<script>
var gc = `天边

演唱：乌英嘎 / 云飞

词：吉尔格楞

曲：乌兰托嘎
天边有一对双星
那是我梦中的眼睛
山中有一片晨雾
那是你昨夜的柔情
我要登上登上山顶
去寻觅雾中的身影
我要跨上跨上骏马
去追逐遥远的星星
星星

天边有一棵大树
那是我心中的绿荫
远方有一座高山
那是你博大的胸襟
我要树下树下采拮
去编织美丽的憧憬
我要山下山下放牧
去追寻你的足印足印
我愿与你策马同行
奔驰在草原的深处
我愿与你展翅飞翔
遨游在蓝天的穹谷
穹谷

`;
var options = {
   pa: '.pa',
   urls: [['https://imgimg.qqdsw8.cn/view.php/28ab45a742641a524b5b054e4ee6c5b5.mp3', '天边']],
   btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
         loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun);
   });
function tzRun() {
   var aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, gc, 0);
   let rosePath = (ww, num) => {
         let points = 300;
         let x0 = y0 = r = ww / 2, pathAr = [];
         for (let i = 0; i <= points; i ++) {
            let angle = i * 2 * Math.PI / points;
            let x = x0 - r * Math.cos(angle) * Math.sin(num * angle);
            let y = y0 - r * Math.sin(angle) * Math.sin(num * angle);
            pathAr.push(x + 'px ' + y +'px');
         }
         return `polygon(${pathAr.join(', ')})`;
   };
   var pa = document.getElementById("pa");
   pa.style.setProperty('--clipPath',rosePath(100,4));
   var pic = document.getElementById("pic");
aud.aud.addEventListener('play', function(){
pic.src = "https://pic1.imgdb.cn/item/6a543dd54893f89183bb4de4.gif";
});
aud.aud.addEventListener('pause', function(){
pic.src = "https://s3.bmp.ovh/2026/09/19/tFS8zd4K.png";
});
}
function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
['contextmenu', 'dragstart','selectstart'].forEach(type =>
pa.addEventListener(type, e => e.preventDefault())
);
</script>
<style>
#lrc {top:12%;background:linear-gradient(15deg,#CCFF66 21%,#33CC99 32%,#66CCCC 43%,#FF9900 52%,#FF3399 62%,#36F4B1 75%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font:bold 3.5rem 'Long Cang','ZCOOL KuaiLe','华文琥珀',STLiti,"宋体","SimSun","Microsoft YaHei",sans-serif; --color1: rgba(100,149,237,.75); --color2: rgba(0,191,255,.65);}
</style>
</body>
</html>

杨帆发表于 2026-9-20 20:02

代码来自马黑黑老师模版，素材来自申木老师分享作品，在此一并表示感谢{:4_190:}

偶然~ 发表于 2026-9-20 20:36

来欣赏精品佳作！

偶然~ 发表于 2026-9-20 20:36

音画太棒了！

偶然~ 发表于 2026-9-20 20:36

音画唯美

偶然~ 发表于 2026-9-20 20:37

对唱的歌声《天边》动听

偶然~ 发表于 2026-9-20 20:37

制作大气磅礴

偶然~ 发表于 2026-9-20 20:38

音画合一，音乐与画面结合完美

偶然~ 发表于 2026-9-20 20:38

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-9-20 20:38

期待杨帆老师佳作频出！

偶然~ 发表于 2026-9-20 20:38

感谢杨帆老师带来的精彩，辛苦了！秋风携桂香送福，愿你往后生活处处有小欢喜。

霜染枫丹 发表于 2026-9-20 22:49

杨帆晚上好！

很大气唯美的佳作，喜欢这首歌。学习点赞，㊗️制作愉快！{:4_204:}{:4_190:}

杨帆发表于 2026-9-21 08:48

偶然~ 发表于 2026-9-20 20:36
来欣赏精品佳作！

问好偶然~，谢谢兄弟鼓励，祝开心{:4_190:}

杨帆发表于 2026-9-21 08:50

霜染枫丹发表于 2026-9-20 22:49
杨帆晚上好！

很大气唯美的佳作，喜欢这首歌。学习点赞，㊗️制作愉快！ ...

久听不厌的一首歌，谢谢枫丹老师喜欢与鼓励{:4_204:}

雨季工作室 发表于 2026-9-21 09:11

欣赏学习杨帆老师佳作。

雨季工作室 发表于 2026-9-21 09:23

欣赏然~老师精湛佳作。

红影发表于 2026-9-21 11:36

制作精美，歌曲好听，欣赏扬帆好帖{:4_187:}

杨帆发表于 2026-9-21 12:18

雨季工作室发表于 2026-9-21 09:11
欣赏学习杨帆老师佳作。

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

杨帆发表于 2026-9-21 12:19

红影发表于 2026-9-21 11:36
制作精美，歌曲好听，欣赏扬帆好帖
问好影子，谢谢鼓励，祝开心{:4_204:}

偶然~ 发表于 2026-9-21 15:33

杨帆发表于 2026-9-21 08:48
问好偶然~，谢谢兄弟鼓励，祝开心

中秋将至，阖家幸福。

页: [1] 2

花潮论坛's Archiver

天 边

天边