前端，直播消息滚动区，顶部阴影模糊效果怎么实现，100红包。求帮助？

Z时代
2024-01-10
分类：技术分享

使用了很多渐变，等css都不行。因为底部需要的感觉是透明的，然后是模糊的效果，消息到顶部需要消失的效果。

// 人家的效果，我们想要的效果
前端，直播消息滚动区，顶部阴影模糊效果怎么实现，100红包。求帮助？

// 我的代码部分。你可以修改

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Javascript实现文字信息间歇性滚动滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:375px;
height:750px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
background: url("./bg.jpg") no-repeat;
overflow:hidden;
position: relative;
}
.content{
height:300px;
overflow:hidden;
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
}
ul li{
list-style:none;
height:40px;
vertical-align: middle;
text-align:left;
background:rgba(0,0,0,0.5);
width: calc(70% - 30px);
margin-left: 20px;
font-size:14px;
margin-bottom: 10px;
border-radius: 8px;
padding: 0 10px;
box-sizing: border-box;
color: white;
}
.xuanfu {
height: 10px;
z-index: 9999;
width: calc(70% - 30px);
margin-left: 20px;
position: absolute;
bottom: 340px;
opacity: .5;
/*background-color: rgba(255,255,255,.6);*/
/*-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);*/ /*!*background-image: linear-gradient(transparent);*!*/ /*!*-webkit-mask: linear-gradient(to right, #000, transparent);*!*/ /*left: 0;*/ }
</style>
</head>
<body>
<div class="box">
<div class="xuanfu"></div>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li>考生走路甩手误将准考证扔河里</li>
<li>20余省公务员省考笔试放榜</li>
<li>辟谷减肥：“大师”称意念发功可治病</li>
<li>2017公务员考试34万人报名 </li>
<li>钢票网与恒丰银行正式签订</li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
<li>美国会表决通过新驻华大使 月底有望赴华</li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
<li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
<li>20余省公务员省考笔试放榜 作弊者特别惨</li>
<li>辟谷减肥：“大师”称意念发功可治病</li>
<li>2017公务员考试34万人报名 平均24人抢1个职位</li>
<li>钢票网与恒丰银行正式签订资金存管协议</li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
<li>美国会表决通过新驻华大使 月底有望赴华</li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
<li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
<li>20余省公务员省考笔试放榜 作弊者特别惨</li>
<li>辟谷减肥：“大师”称意念发功可治病</li>
<li>2017公务员考试34万人报名 平均24人抢1个职位</li>
<li>钢票网与恒丰银行正式签订资金存管协议</li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
<li>美国会表决通过新驻华大使 月底有望赴华</li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
</ul> <ul id="msg2"></ul>
</div></div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
var liHeight = 50;
var speed = 50;//滚动的速度
msg2.innerHTML=msg1.innerHTML;
var delay = 10;
var time;
content.scrollTop=0;
function startScroll(){
time = setInterval(upScroll,speed);
content.scrollTop++;
};
function upScroll(){
if(content.scrollTop % liHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
content.scrollTop++;
if(content.scrollTop >= content.scrollHeight/2){
content.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
</body></html>

回答

应该是用mask-image实现吧。大概像这样

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用Javascript实现文字信息间歇性滚动滚动</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 375px;
      height: 750px;
      margin: 100px auto;
      border: 1px solid #000;
      border-radius: 20px;
      box-shadow: 5px 5px 10px #333;
      background: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1120228856,2651344162&fm=26&gp=0.jpg") no-repeat;
      overflow: hidden;
      position: relative;
    }
    .content {
      height: 300px;
      overflow: hidden;
      position: absolute;
      bottom: 50px;
      left: 0;
      width: 100%;
      font-size: 14px;
    }
    ul li {
      list-style: none;
      height: 40px;
      vertical-align: middle;
      text-align: left;
      background: rgba(0, 0, 0, 0.5);
      width: calc(70% - 30px);
      margin-left: 20px;
      font-size: 14px;
      margin-bottom: 10px;
      border-radius: 8px;
      padding: 0 10px;
      box-sizing: border-box;
      color: white;
    }
    .out {
      -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.1), rgba(0,0,0,.5) 14px, rgba(0,0,0,1));
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="xuanfu"></div>
    <div class="content" id="content">
      <ul class="msg1" id="msg1">
        <li>考生走路甩手误将准考证扔河里</li>
        <li>20余省公务员省考笔试放榜</li>
        <li>辟谷减肥：“大师”称意念发功可治病</li>
        <li>2017公务员考试34万人报名 </li>
        <li>钢票网与恒丰银行正式签订</li>
        <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
        <li>美国会表决通过新驻华大使 月底有望赴华</li>
        <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
        <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
        <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
        <li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
        <li>20余省公务员省考笔试放榜 作弊者特别惨</li>
        <li>辟谷减肥：“大师”称意念发功可治病</li>
        <li>2017公务员考试34万人报名 平均24人抢1个职位</li>
        <li>钢票网与恒丰银行正式签订资金存管协议</li>
        <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
        <li>美国会表决通过新驻华大使 月底有望赴华</li>
        <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
        <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
        <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
        <li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
        <li>20余省公务员省考笔试放榜 作弊者特别惨</li>
        <li>辟谷减肥：“大师”称意念发功可治病</li>
        <li>2017公务员考试34万人报名 平均24人抢1个职位</li>
        <li>钢票网与恒丰银行正式签订资金存管协议</li>
        <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
        <li>美国会表决通过新驻华大使 月底有望赴华</li>
        <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
        <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
        <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
      </ul>
      <ul id="msg2"></ul>
    </div>
  </div>
  <script>
    var content = document.getElementById("content");
    var msg1 = document.getElementById("msg1");
    var msg2 = document.getElementById("msg2");
    var liHeight = 50;
    var speed = 50;//滚动的速度
    msg2.innerHTML = msg1.innerHTML;
    var delay = 10;
    var time;
    content.scrollTop = 0;
    function startScroll() {
      time = setInterval(upScroll, speed);
      content.scrollTop++;
    };
    function upScroll() {
      var current = content.scrollTop/50|0;
      var children = msg1.children;
      children[current].classList.add('out');
      if(current) children[current-1].classList.remove('out')
      if (content.scrollTop % liHeight == 0) {
        clearInterval(time);
        setTimeout(startScroll, delay);
      } else {
        content.scrollTop++;
        if (content.scrollTop >= content.scrollHeight / 2) {
          content.scrollTop = 0;
        }
      }
    }
    setTimeout(startScroll, delay)
  </script>
</body></html>