Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
770 views
in Technique[技术] by (71.8m points)

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

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

// 人家的效果,我们想要的效果

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

<!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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

应该是用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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
...