在网页上加载使元素100％

我有此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条目"一个"来填写启动的页面，然后是动画来运行其课程的内容。在启动时有什么想法吗？

欢呼，Greg。

得到它，！只需在身体上添加背景颜色与第一个孩子一样！ -

相关内容

最新更新

热门标签：