论坛 › 【代码图腾】 › 放 下

约会阳光 发表于 2024-11-16 22:14

放 下

<style>
#papa {
        margin: 100px 0 30px calc(50% - 790px);
        width: 1400px;
        height: 760px;
        background: url('https://pic.imgdb.cn/item/66cdbb83d9c307b7e91a1eb0.jpg') no-repeat center/cover;
        background-blend-mode: soft-light;
        pointer-events: none;
        overflow: hidden;
        position: relative;
        z-index:1;
}
#fullscreen { position: absolute; bottom:10px;left:10px;font: bold 1.5emFangSong;color:Honeydew; opacity:0.98; cursor: pointer;pointer-events: auto; z-index: 11}
#vid{
    position: absolute;
    top:-100px;
    left:0%;
    width: 100%;
    height:130%;
    mix-blend-mode:screen;
    opacity: 0.9;   
    object-fit: cover;
}
#player {
    position: absolute;
    margin: 20px auto;
    width: 120px;
    height: 120px;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 50%;
    opacity: .8;
    animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
#player:hover { filter: drop-shadow(0 0 80px Gold); }
.tit{
   position: absolute;
   width: 700px;
   object-fit: cover;
   z-index:2;
   top:100px;
   left: 61%;
   background-image:url('https://pic.imgdb.cn/item/65fdabba9f345e8d03ec83d7.png');
   background-size:cover;
   font: bold 1.6em STLiti;
   font-weight:666;
   text-align:center;
   line-height:75px;
   color:transparent;
   pointer-events: auto;   
   -webkit-background-clip:text;
}
#marquee{
        height: 180px;
        overflow: hidden;
}
#marquee > div {
    text-align: center;
    animation: marquee 245s linear infinite var(--state);
}
#marquee:hover>div{
        animation-play-state:paused;
}
#marquee p{
        height: 30px;
        margin: 0;
}
@keyframes marquee {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-100%);
    }
}
#papa::before {
    position: absolute;
    content: '';
    width: 100%;
    height:11.5%;
    bottom: 1px;
    background: inherit;
    filter: url(#turb);
}
#papa > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
</style>
<div id="papa" class="papa" >
<span id="fullscreen">全屏欣赏</span>
<svg class="myfilter"><filter id="turb" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%"><feturbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2"></feturbulence><fedisplacementmap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></fedisplacementmap></filter></svg>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b572bcae223c.mp4" autoplay loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31544230" autoplay loop></audio>
    <img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/dou.png" title="播放/暂停" />
<div id="marquee" >
<div class="tit">
<h2>放下<h2><br>
演唱：印良法师<br>
词曲：印良法师<br><br>
爱过了 恨过了 放下吧<br>
有过了 痛过了 看破吧<br>
虔诚地 顶礼啊 佛菩萨<br>
今皈依 三宝啊<br>
清静了 随缘了 现莲花<br>
了脱了 自在啊 菩提妙法<br>
入空门 着袈裟 摩诃萨<br>
晨钟啊 暮鼓啊<br>
大慈啊 大悲啊 观音菩萨<br>
伴青灯 古佛啊<br>
大慈啊 大悲啊 观世音菩萨<br>
伴青灯 古佛啊<br>
爱过了 恨过了 放下吧<br>
有过了 痛过了 看破吧<br>
虔诚地 顶礼啊 佛菩萨<br>
今皈依 三宝啊<br>
清静了 随缘了 现莲花<br>
了脱了 自在啊 菩提妙法<br>
入空门 着袈裟 摩诃萨<br>
晨钟啊 暮鼓啊<br>
大慈啊 大悲啊 观音菩萨<br>
伴青灯 古佛啊<br>
大慈啊 大悲啊 观世音菩萨<br>
伴青灯 古佛啊<br>
大慈啊 大悲啊 观音菩萨<br>
伴青灯 古佛啊<br>
大慈啊 大悲啊 观世音菩萨<br>
伴青灯 古佛啊<br><br>
<br></div>
</div></div>
<script>
const marquee = document.getElementById('marquee');
const contents =marquee.innerHTML;
marquee.innerHTML = contents + contents;
var mState = () => {
    player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    player.title = aud.paused ? '播放' : '暂停';
    aud.paused ? vid.pause() : vid.play();
    svg.style.setProperty('opacity', aud.paused ? '0' : '.8');
};
   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
   player.onclick = () => aud.paused ? aud.play() : aud.pause();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
(function() {
let frames = 0, rad = Math.PI / 180;
let fewave = () => {
      let bfx = 0.01, bfy = 0.1;
      frames += 0.5;
      bfx += 0.002 * Math.cos(frames * rad);
      bfy += 0.02 * Math.sin(frames * rad);
      bf = ;
      feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
      requestAnimationFrame(fewave);
    };
    fewave();
})();
</script>

容轩听雨 发表于 2024-11-17 20:12

嵌入的弘佛视频禅意融融，佛歌有虔诚皈依三宝修行之意！问好老师！

巫荣云师 发表于 2024-11-17 20:54

欣赏收藏老师的[代码佳作]好看又好听，点赞！

约会阳光 发表于 2024-11-18 10:19

容轩听雨 发表于 2024-11-17 20:12
嵌入的弘佛视频禅意融融，佛歌有虔诚皈依三宝修行之意！问好老师！

谢谢容轩听雨版主支持与鼓励，祝开心{:1_1:}

约会阳光 发表于 2024-11-18 10:20

巫荣云师 发表于 2024-11-17 20:54
欣赏收藏老师的[代码佳作]好看又好听，点赞！

谢谢巫荣云师友友支持与鼓励，祝开心{:1_1:}

查看完整版本: 放 下