Question

我有这个css和html ....

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Musabiltiy Music Therapy</title>
<style>
body {
  color: #fff;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.demo li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: -webkit-box-flex 500ms ease-out;
  -webkit-transition: -webkit-flex 500ms ease-out;
  transition: -webkit-box-flex 500ms ease-out;
  transition: -ms-flex 500ms ease-out;
  transition: flex 500ms ease-out;
  padding: 30px;
}

.demo li:nth-child(1) { background: #f2b635; }

.demo li:nth-child(2) { background: #f19a2a; }

.demo li:nth-child(3) { background: #49b3e8; }

.demo li:nth-child(4) { background: #00a0e6; }

.demo li:nth-child(5) { background: #f25648; }

.demo li:hover {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
</style>


</head>

<body>

<ul class="demo slideInRight animated">
  <li >One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

</body>
</html>

我想要做的是让li条目“one”在启动时填充页面然后动画运行它的路线....我似乎无法使ul“one”填满整个屏幕在启动任何想法？

干杯，格雷格。

Answer 1

得到了它，！只需添加背景颜色到第一个孩子的身体！ -

在网页上加载make element 100％

1 个答案: