论坛 › 人机音画视频 › 星-邓丽君

万顷湖 发表于 2026-5-27 13:35

星-邓丽君

本帖最后由 万顷湖 于 2026-5-29 06:49 编辑 <br /><br /><meta charset="utf-8">
<div style="position: absolute; left:0px;width:100%;margin-top:120px;">
<style>
#papa {
      margin:
      width: 1286px;
      height: 720px;
      background:#128.0.0;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }

.lrc{ position: absolute;top:10%; left:5px;
    width: 860px;
    height: 550px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        z-index: 9;
    overflow: hidden;
    display: block;
    margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #ccc;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrcli.active{
    font-size: 30px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(120deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);animation: flowCss 6s infinite linear;
   -webkit-background-size: 200% 100%;}
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }

#ullrc:hover {-webkit-animation: flowCss 4s infinite linear;}
#bt{width: 200px; overflow: hidden; color:#fff; position: absolute; left:78%;bottom: 2%;font-size: 15px; z-index: 19;}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}
#dt{position: absolute;top:85%; left:64%;
        width: 35%;mix-blend-mode: screen;
        height: 15%;z-index: 3; }

#dt img{
        width: 100%;
        height: 100%;}
</style>

<div id="papa">
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div class="lrc" >
      <ul id="ullrc">
          </ul>
      </div>
<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 5%;left: 72%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                clip-path: @shape(
                points: 360;
            r: abs.sin.tan(sin(3.5t)*1.14);
      );
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div id='dt'><img id="Img" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" ></div>
<div id="testImg" >
      <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
      </div>
<audio id="aud" src="https://cccimg.com/view.php/a849fdf357bb6b1e0f976c1c02205bcb.mp3" autoplay loop></audio>
<span id="bt">花潮论坛</span>
</div>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop'),imagee.stop()):(image.classList.remove('stop'),imagee.play());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
ullrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ullrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => ullrc.style.animationPlayState = 'paused');
</script>

<script >
var lrc = `星 - 邓丽君
阵阵狂风吹过一片荒野
遍地是泥泞方向未能明
只有满天星光静静照着我
给我破碎的心带来光明
啊星呀灿烂
伴我远行照我身影
啊星光引路
哪怕道路崎岖不平
带着理想
我要追求我心中的梦
带着理想
跟随我我的星
阵阵狂风吹过一片荒野
遍地是泥泞方向未能明
只有满天星光静静照着我
给我破碎的心带来光明
啊星呀灿烂
伴我远行照我身影
啊星光引路
哪怕道路崎岖不平
带着理想
我要追求我心中的梦
带着理想
跟随着我的星
啊星呀灿烂
伴我远行照我身影
啊星光引路
哪怕道路崎岖不平
带着理想
我要追求我心中的梦
带着理想
跟随着我的星
带着理想
我要追求我心中的梦
带着理想
跟随着我的星
摇呀摇摆灿烂的星
花潮论坛`;

function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 50, lrc_ul_height = 250;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("aud").ontimeupdate = setPosition;

</script>
<script>
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;clip-path: polygon(0% 0%, 0% 100%, 62% 100%, 63% 84%, 100% 74%, 100% 99%, 100% 0%);
top:0px; left:0px;
animation: spin 24s infinite linear;
      opacity: 0;
}

.演员:nth-of-type(1) {animation-delay: 20s;
      background: url('https://cccimg.com/view.php/65a567bf5bcc6b31e9debd38920e8164.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(2) {animation-delay: 16s;
      background: url('https://cccimg.com/view.php/1eed5ff0354486f14e5177407cf98903.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(3) {animation-delay: 12s;
      background: url('https://cccimg.com/view.php/92acc41ac478f35f5703a0f6e791942c.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(4) {animation-delay: 8s;
      background: url('https://cccimg.com/view.php/fa5fcacd5e1f814bf91faf68ab4136ed.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(5) {animation-delay: 4s;
      background:url('https://cccimg.com/view.php/d9dbeff08eaaf88defa99564e729bda6.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(6) {animation-delay: 0s;
      background: url('https://cccimg.com/view.php/bb7e9db7dbe34c06dce6e89c99a3dc9d.jpg')no-repeat center/cover;
      
}
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
      0% { opacity: 0; }
      8% { opacity: 1; } 10% { opacity: 1; }25% { opacity: 0; }
}
</style>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            imagee.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var imagee= document.getElementById("Img");
</script>

</div>
<div style="height:960px;"></div>

梦江南 发表于 2026-5-27 14:19

下午怎么啦，万教授的音画也看不到。

也曾年轻 发表于 2026-5-27 16:08

https://p6.itc.cn/q_70/images03/20211119/a1c1fc05bd1c43198e778983a328e687.gif

梦江南 发表于 2026-5-27 20:27

也曾年轻 发表于 2026-5-27 16:08


老师怎么看到啊？

也曾年轻 发表于 2026-5-27 21:22

梦江南 发表于 2026-5-27 20:27
老师怎么看到啊？
https://s3.bmp.ovh/2026/05/27/0CIiCF4e.jpg


很正常的

红影 发表于 2026-5-27 21:42

制作漂亮，很喜欢的邓丽君的歌曲。
感谢万顷湖带来的好歌{:4_187:}

红影 发表于 2026-5-27 21:43

右下角的那块黑色是为了表现频谱和播放器吧，感觉这样一块黑有些突兀呢{:4_204:}

梦江南 发表于 2026-5-28 08:21

也曾年轻 发表于 2026-5-27 21:22
很正常的

是我的浏览器问题了，360安全浏览器，怎么会看不到，郁闷！

也曾年轻 发表于 2026-5-28 08:41

梦江南 发表于 2026-5-28 08:21
是我的浏览器问题了，360安全浏览器，怎么会看不到，郁闷！

就是系统自带的Edge浏览器

梦江南 发表于 2026-5-28 08:55

也曾年轻 发表于 2026-5-28 08:41
就是系统自带的Edge浏览器

要么切换到其他浏览器盾盾

也曾年轻 发表于 2026-5-28 10:22

梦江南 发表于 2026-5-28 08:55
要么切换到其他浏览器盾盾

除自带的浏览器还安装了其它两个浏览器（chrome、firefox）都能正常显示。

这帖子用了一点新技术（css-doodle）或许因为浏览器不支持它导致显示不正常吧。

梦江南 发表于 2026-5-28 10:40

也曾年轻 发表于 2026-5-28 10:22
除自带的浏览器还安装了其它两个浏览器（chrome、firefox）都能正常显示。

这帖子用了一点新技术（css ...

有可能的

也曾年轻 发表于 2026-5-28 10:46

梦江南 发表于 2026-5-28 10:40
有可能的

如果会看浏览器的调试信息也能确定问题在哪。

梦江南 发表于 2026-5-28 11:38

也曾年轻 发表于 2026-5-28 10:46
如果会看浏览器的调试信息也能确定问题在哪。

试试用别的浏览器看看

梦江南 发表于 2026-5-28 12:33

也曾年轻 发表于 2026-5-28 10:46
如果会看浏览器的调试信息也能确定问题在哪。

用了豆包浏览器，360极速，都看不到

万顷湖 发表于 2026-5-28 23:19

红影 发表于 2026-5-27 21:43
右下角的那块黑色是为了表现频谱和播放器吧，感觉这样一块黑有些突兀呢

改为蓝色，是否仍突兀？

查看完整版本: 星-邓丽君