html跑馬燈移動位置？

跑馬燈

badboy01 2021-01-11 11:53:59 ‧ 3218 瀏覽

請問網頁設計寬度是1366像素，如果跑馬燈要在網頁右邊一小塊位置移動就好，語法怎麼下呢？
謝謝！

看更多先前的討論...收起先前的討論...

窮嘶發發發 iT邦高手 1 級 ‧ 2021-01-11 12:07:01 檢舉

div 主頁 CSS: 位置:參考
div 跑馬燈 CSS:位置:相對放置:右 0 上 0
大概觀念就這樣

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-11 12:08:50 檢舉

我只想知道你目前這個工作是否有超過3個月以上了。
你是否都是這樣提出問題?
這是否是你的專業領域?
是否又是覺得這件事很ooxx的?

badboy01 iT邦新手 2 級 ‧ 2021-01-11 14:35:00 檢舉

TO 浩瀚星空：
小弟只是負責網路設備與電腦，但是網站是php找人設計的，網頁廠商倒了所以變孤兒。所以想看看用html建一個跑馬燈功能，只是很久沒摸網頁只知道簡單html語法，網路找的資訊還是搞不定@@"

leeihsing0127 iT邦新手 5 級 ‧ 2021-01-12 10:30:30 檢舉

網頁廠商倒了@@
好慘唷，可以找個工程師外包~

zzxcv741 iT邦新手 5 級 ‧ 2021-01-13 10:37:57 檢舉

建議你有系統的學吧,你東找一塊西找一塊一定看不懂,
免費的金魚系列看幾次應該可以懂80%了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

zzxcv741

iT邦新手 5 級 ‧ 2021-01-11 14:14:42

最佳解答

用css寫了個demo，您參考看看

HTML


  <div class="container">
    <div class="marquee">
      <div class="text">css marquee 由左到右</div>
      <div class="text2">css marquee 由左到右</div>
    </div>
  </div>

css


    .container{
      width: 1366px;
      height:100vh;
      background-color: rgb(231, 170, 170);
      position: relative;
    }
    .marquee{
      width: 20%;
      background-color: antiquewhite;
      padding: 10px 0;
      position: absolute;
      right:0;
      top:0;
      overflow: hidden;
    }
    .text{
      position: relative;
      transform: translateX(-40%);
      animation: runleft linear 6s infinite; 
    }
    .text2{
      text-align: right;
      position: relative;
      transform: translateX(50%);
      animation: runright linear 6s infinite; 
    }

    @keyframes runleft {
      0%{
        transform:translateX(-40%);
      }
      100%{
        transform:translateX(105%);
      }
    }

    @keyframes runright {
      0%{
        transform:translateX(50%);
      }
      100%{
        transform:translateX(-100%);
      }
    }

codepen : https://codepen.io/linglingsyu/pen/yLaxbox

回應 3
分享
檢舉

badboy01 iT邦新手 2 級 ‧ 2021-01-11 16:04:03 檢舉

謝謝提供資料~

zzxcv741 iT邦新手 5 級 ‧ 2021-01-13 10:35:04 檢舉

你問的移動跑馬燈的位置，在css的.marquee
right:0;
top:0;
更改這兩個的數值就好(10px或幾rem之類的,css有很多單位)
上面的意思就是距離你父層右邊0，上方0的位置(也就是右上角)
也可以成left:0,bottom:0 這就是在左下角囉
你想改到下方偏中間
將
right:0;
top:0;
改成以下試試看
bottom:0;
left:50%;
這算是很基本的css觀念,你這樣上來問我們也很難講的明白
我光給你答案,你或許也看不懂
如果你想自學的話,金魚系列可以先看看