论坛 › 〖互。助〗求助探讨 › 这个不知咋处理【咋裁剪溢出部分】已解决

亚伦影音工作室 发表于 2024-11-11 20:34

这个不知咋处理【咋裁剪溢出部分】已解决

本帖最后由 亚伦影音工作室 于 2024-11-12 20:08 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-310px;
        margin-top:140px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/642e2c05a682492fcc609190.jpg)no-repeat center/cover;
        overflow: hidden;--state: running;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }

#tp{position: absolute;z-index: 1;
        width: 1286px;        height: 720px;
        background:#222;
      margin-left:0px;
        margin-top:0px;animation: light 6s ease-in infinite ;}
@keyframes light {
   0% { opacity: 1; }
   2% { opacity: 0; }
   3% { opacity: 0.6; }
   4% { opacity: 0.3; }
   6% { opacity: 0.8; }
   100% { opacity: 1; }
}

#rain {width: 1px;z-index: 2;
height: 30px;
background: #8db0b4;
position: absolute;
top: 5px;opacity: 0.4;
left: 0px;
border-radius: 50%;
animation: rain 8s linear infinite   var(--state);
blur: 1px;
}

@keyframes rain {
   from {}
   to {top: 200vh; }
}

.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
    width: 960px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 360px 400px;/*歌词调整：上下 左右*/
}
.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: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #00fff0;transform: translate(0%,0%);
    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 #ullrc li.active{
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;
</style>
<div id="papa">
<div id='tp'></div><div id='rain' ></div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<div><img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png"></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/5d/63/59/7ab6a175bc7ab1ed206253830b3cfdf2/audio.mp3" autoplay loop ></audio>
</div>
<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

aud.onplaying = aud.onpause = () => mState();
mState = () => {
        papa.style.setProperty('--state',aud.paused ? 'paused' : 'running');
};
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';

tp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tp.style.animationPlayState = 'paused');


let raindrop = document.querySelector('#rain');
for (let i = 0; i< 500; i++) {
let newRaindrop = raindrop.cloneNode(true);
newRaindrop.style.left += Math.floor(Math.random() * 100) + 'vw';
newRaindrop.style.top = '-' + (Math.floor(Math.random() * 300) + 'vh');
newRaindrop.style.animationDuration = getRandom(2, 6) + 's';
papa.appendChild(newRaindrop);}

function getRandom(min, max) {
const floatRandom = Math.random()
const random = Math.round((max - min) * floatRandom)
const randomWithinRange = random + min
return randomWithinRange;
}

</script>
<script >
var lrc = `艺凌-2025一定要幸福
作词：刘于谦 包一飞
作曲：隔壁老胡
编曲：大约在冬季
回首走过来时路
不知吃了多少苦
背后没有参天的树
痛也只能自己背负
今年有太多酸楚
也尝尽太多孤独
等我走出人生低谷
去看前方最美日出
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福
多一些时间少一点忙碌
你流过的眼泪 也都开出花束
为你铺好余生的路
今年有太多酸楚
也尝尽太多孤独
等我走出人生低谷
去看前方最美日出
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福
多一些时间少一点忙碌
你流过的眼泪 也都开出花束
为你铺好余生的路
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福
`;
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 = 50;/*动态歌词显示的位置：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 >

马黑黑 发表于 2024-11-11 20:50

主帖元素css加一句：

overflow：hidden;

马黑黑 发表于 2024-11-11 21:04

本帖最后由 马黑黑 于 2024-11-11 21:09 编辑

看了代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);

应改为：

papa.appendChild(newRaindrop);

你原来的代码，是将雨滴添加到了 body 标签，所以overflow: hidden 管不了它

亚伦影音工作室 发表于 2024-11-11 21:08

马黑黑 发表于 2024-11-11 21:04
看可以下代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);


豁然开朗了，是的原来在body里。谢谢老师了！

亚伦影音工作室 发表于 2024-11-11 21:44

本帖最后由 亚伦影音工作室 于 2024-11-12 10:51 编辑

马黑黑 发表于 2024-11-11 21:04
看了代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);

艺凌-2025一定要幸福
作词：刘于谦 包一飞
作曲：隔壁老胡
编曲：大约在冬季
回首走过来时路
不知吃了多少苦
背后没有参天的树
痛也只能自己背负
今年有太多酸楚
也尝尽太多孤独
等我走出人生低谷
去看前方最美日出
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福
多一些时间少一点忙碌
你流过的眼泪 也都开出花束
为你铺好余生的路
今年有太多酸楚
也尝尽太多孤独
等我走出人生低谷
去看前方最美日出
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福
多一些时间少一点忙碌
你流过的眼泪 也都开出花束
为你铺好余生的路
2025一定都要幸福
多一些快乐少一点辛苦
一路顺风顺水 好运都来光顾
欢喜也有人陪你渡
2025一定都要幸福

醉美水芙蓉 发表于 2024-11-11 21:49

亚伦影音工作室 发表于 2024-11-11 21:59

醉美水芙蓉 发表于 2024-11-11 21:49
亚伦老师音乐能控制，雨滴控制不了！

才疏学浅，用很多办法都不行，正在请教老师！

醉美水芙蓉 发表于 2024-11-11 22:03

红影 发表于 2024-11-11 23:16

雨滴无法控制。制作很漂亮，隐现的女子像被闪电带出来似的{:4_187:}

马黑黑 发表于 2024-11-11 23:22

本帖最后由 马黑黑 于 2024-11-11 23:23 编辑 <br /><br />亚伦影音工作室 发表于 2024-11-11 21:44
老师我失败了，音乐控制不了！

<p>梳理一下你的代码：</p>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
        margin-left:-300px;
        margin-top:140px;
        border: 0px solid rgba(36, 201, 219,.95);
        border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg)no-repeat center/cover;
        overflow: hidden;
        --state: running;
}

#mdiv {
        top:12%;
        left:85%;
        cursor: pointer;
        width:120px;
        height: 120px;
        animation:rot 10s linear infinite var(--state);
        position: absolute;
        filter:drop-shadow(0 0 1px #000);
        z-index: 40;
}

#tp{
        position: relative;
        width: 1286px;
        height: 720px;
        overflow: hidden;
        background:#1A192D;
        margin-left:0px;
        margin-top:0px;
        animation: light 10s ease-in infinite;
}

#rain {
        width: 3px;
        height: 6px;
        background: #8db0b4;
        position: absolute;
        top: 5px;
        left: 0px;
        border-radius: 3px;
        animation: rain 8s linear infinite var(--state);
        filter: blur(5px);
}

@keyframes rot {
        to { transform: rotate(2turn);}
}

@keyframes light {
        0% { opacity: 1; }
        2% { opacity: 0; }
        3% { opacity: 0.6; }
        4% { opacity: 0.2; }
        6% { opacity: 0.9; }
        100% { opacity: 1; }
}

@keyframes rain {
        to { top: 200vh; }
}
&lt;/style&gt;

&lt;div id="papa"&gt;
        &lt;div id='tp'&gt;&lt;div id='rain'&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
                &lt;img id="mdiv" src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png" alt="" /&gt;
                &lt;audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2a/fd/7f/36208a1240aa7e16bede45b9a765cb96/audio.mp3" autoplay loop &gt;&lt;/audio&gt;
        &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
mdiv.onclick = () =&gt; aud.paused ? aud.play(): aud.pause();
mState = () =&gt; {
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};

aud.onplaying = aud.onpause = () =&gt; mState();

let raindrop = document.querySelector('#rain');
for (let i = 0; i&lt; 500; i++) {
        let newRaindrop = raindrop.cloneNode(true);
        newRaindrop.style.left += Math.floor(Math.random() * 100) + 'vw';
        newRaindrop.style.top = '-' + (Math.floor(Math.random() * 300) + 'vh');
        newRaindrop.style.animationDuration = getRandom(2, 6) + 's';
        papa.appendChild(newRaindrop);
}
function getRandom(min, max) {
        const floatRandom = Math.random();
        const random = Math.round((max - min) * floatRandom);
        const randomWithinRange = random + min;
        return randomWithinRange;
}
&lt;/script&gt;
</pre></div>

<p><br>因为要控制多个 CSS动画，因此，可以将CSS动画交给 --state 变量统一管理，实现函数是 mState()，mState() 可以扩展，比如控制视频，你就加一个控制视频的语句。</p>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

醉美水芙蓉 发表于 2024-11-12 11:13

查看完整版本: 这个不知咋处理【咋裁剪溢出部分】已解决