CSS3之动画模块实现云朵漂浮效果

最新推荐文章于 2024-08-26 19:16:26 发布

weixin_30929011

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量611

点赞数 1

原文链接：http://www.cnblogs.com/xiaonanxia/p/10668898.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画模块-云层效果</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    ul {
      height: 400px;
      background-color: skyblue;
      margin-top: 100px;
      /* 动画名 动画时长 延迟时间 动画次数 来回交替*/
      animation: change 5s 0s infinite alternate;
      position: relative;
    }
    ul li {
      list-style: none;
      width: 400%;/*保证图片可以不超出ul*/
      height: 100%;

      position: absolute;
      left: 0px;
      top: 0px;
    }
    ul li:nth-child(1){
      background-image: url("images/cloud_one.png");
      animation: one 30s linear 0s infinite alternate;
    }
    ul li:nth-child(2){
      background-image: url("images/cloud_two.png");
      animation: two 30s linear 0s infinite alternate;
    }
    ul li:nth-child(3){
      background-image: url("images/cloud_three.png");
      animation: three 30s linear 0s infinite alternate;
    }
    @keyframes change {
      from {
        background-color: skyblue;
      }
      to {
        background-color: black;
      }
    }
    @keyframes one {
       from{
         margin-left: 0;
       }
       to {
         margin-left: -100%;/*时间相同，距离不同，所以移动速度不一样*/
       }
    }
    @keyframes two {
      from{
        margin-left: 0;
      }
      to {
        margin-left: -200%;
      }
    }
    @keyframes three {
      from{
        margin-left: 0;
      }
      to {
        margin-left: -300%;
      }
    }

  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>