关于云朵的进入和消失

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!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