关于云朵的进入和消失

我写的代码实现不了案例中的效果，请老师告诉我怎么改进。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  body{
    margin: 0; padding: 0;
    overflow: hidden;
  }
  .sky{
    width: 100%;
    height: 60vh;
    /* background: rgb(196, 228, 253) */
    background: linear-gradient(0deg, #fff , rgb(196, 228, 253))
  }
  .grass{
    width: 100%;
    height: 40vh;
    /* background: rgb(148, 190, 89) */
    background: linear-gradient(0deg, rgb(148, 190, 89), #fff)
  }
  .rabbit{
    width: 300px;
    height: 300px;
    position: absolute;
    bottom: 50px;
    right: 150px;
    background:  url(./rabbit.png) no-repeat center;
    background-size: 100%
  }
  .cloud{
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    left: 100px;
    border-radius: 50%;
  }
  .cloud::before{
    content: '';
    position: absolute;
    left: -80px;
    bottom: 5px;
    width: 190px;
    height: 50px;
    background: #fff;
    border-radius: 25px 25px 30px 30px/ 25px 25px 25px 25px;
  }
  .cloud::after{
    content: '';
    position: absolute;
    left: -49px;
    bottom: -12px;
    width:  70px;
    height: 95px;
    background: #fff;
    border-radius: 35px / 35px 35px 35px 35px;
    transform: rotate(-45deg)
  }
  .cloud.one{
    position: absolute;
    top: 0px;
    left: 80px;
    transform: scale(.7, .7);
    z-index: 7;
    opacity: .7;
  }
  .cloud.two{
    position: absolute;
    top: 100px;
    left: 300px;
    z-index: 9;
    opacity: .9;
    animation: cloud_two 5s linear infinite;
    /* transform: translateX(0px) */
  }
  .cloud.three{
    position: absolute;
    top: 200px;
    left: 250px;
    z-index: 8;
    opacity: .8;
    transform: scale(.8, .8) 
  }
  .cloud.four{
    position: absolute;
    top: 0px;
    left: 650px;
    z-index: 8;
    opacity: .8;
    transform: scale(.8, .8)
  }
  .cloud.five{
    position: absolute;
    top: 200px;
    left: 800px;
    z-index: 7;
    opacity: .7;
    transform: scale(.7, .7)
  }
  @keyframes cloud_two {
    from{
      left: 300px;
      /* transform: translateX(0px) */
    }
    50%{
      left: -300px
      /* transform: translateX(2000px) */
    }
    to{
      left: 2000px
      /* transform: translateX(-200px) */
    }
  }
  </style>
</head>
<body>
  <div class="sky">
    <div class="cloud one"></div>
    <div class="cloud two"></div>
    <div class="cloud three"></div>
    <div class="cloud four"></div>
    <div class="cloud five"></div>
  </div>
  <div class="grass"></div>
  <div class="rabbit"></div>
</body>
</html>

兰香川川 2019-10-09

源自：项目：CSS3实现汉克狗案例 2-14 项目作业

收起

1回答

好帮手慕星星 2019-10-09 18:29:01

同学你好，

主要是定义动画问题，白云从右侧进入，左侧远离，修改left值，如下：

用百分比，这样不同分辨率显示器效果也是正常的。然后每朵白云设置不同动画时间就好，例如：

自己修改测试下，祝学习愉快！

收起回答

提问者兰香川川 #1

太感谢了，我终于明白了。老师我还有一个问题，为什么在设置定位的时候，我用right: 300px起不到定位的作用，而left就可以呢。

2019-10-09 18:31:43
好帮手慕星星回复提问者兰香川川 #2

当left和right属性同时存在的时候，left优先级高，right属性就不起作用了，所以没有效果。代码中每朵白云设置的都是left定位，所以动画中也需要设置left值。自己可以测试下。

2019-10-09 18:39:04