WEB前端

CSS连续向左滚动效果(水平无缝.不用js或jquery)

位置:首页 > WEB前端 > css教程,2019-08-07 12:04
是不是想不到,用CSS连续向左滚动效果(水平无缝),比一般的用js或jquery效果更好。大家一起看看

CSS连续向左滚动(图0)

用CSS连续向左滚动效果(水平无缝),比一般的用js或jquery效果更好。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>CSS连续向左滚动效果(水平无缝.不用js或jquery)</title>
<style>
@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: -500px;
  }
}
#wrap {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  margin: 100px auto;
  overflow: hidden;
}
#list {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  animation: 3s move infinite linear;
  width: 200%;
}
#list li {
  list-style: none;
  width: 98px;
  height: 98px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  font: 50px/98px Arial;
  text-align: center;
  float: left;
}
#wrap:hover #list {
  animation-play-state: paused;
}
</style>
</head>
<body>
  <div id="wrap">
    <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</body>
</html>

TAGS:CSS连续向左滚动

猜你喜欢

NewHot