CSS特效問題

css

CSS/UI/UX 2018-03-11 17:57:14 ‧ 4467 瀏覽

分享至

想做一個特效從右邊往左邊跑進來
但下面都會有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 }} |

直播中

1 個回答

暐翰

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%;
      }
    }

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