iT邦幫忙

1

CSS特效問題

css

想做一個特效從右邊往左邊跑進來
但下面都會有scroll跟著跑
請問如何去掉

<!DOCTYPE html>
<html>
<head>
  <title>動畫</title>
  <style type="text/css">
    .animation {
      animation-duration: 3s;
      animation-name: slidein;
    }
 
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%; 
      }
 
      to {
        margin-left: 0%;
        width: 100%;
      }
    }
  }
  </style>
</head>
<body>
<div class="animation">你好呀</div>
</body>
</html>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
暐翰
iT邦大師 1 級 ‧ 2018-03-11 18:27:27
最佳解答

問題:

想做一個特效從右邊往左邊跑進來
但下面都會有scroll跟著跑
請問如何去掉

回答:

這是因為你設置
width: 100%關係
加上margin-left:100%關係
所以會有scroll

隨著動畫導致頁面寬度由大變小
所以scroll條也會跟著放大

解決方式:

1.css裡面加上

body{
 overflow-x: hidden;
}

2.css部分改成

    .animation {
      animation-duration: 3s;
      animation-name: slidein;
    }
 
    @keyframes slidein {
      from {
        margin-left: 99%;
      }
 
      to {
        margin-left: 0%;
      }
    }

缺點:使用者"刻意去看的時候",可以發現字會擠在右邊成一團

CSS/UI/UX iT邦新手 5 級 ‧ 2018-03-11 21:24:09 檢舉

感激!!

我要發表回答

立即登入回答