关于五朵云的控制

我的思路是通过群组选择器把所有的云朵绘制完毕，它们都在相同的位置上，然后再单独的控制一朵云的位置。但是当我单独选择再平移的时候却没有反应，想问一下是为什么？还是说我的思路不对，每一朵云必须单独绘制单独定位？

Holajulie 2017-02-06

源自：CSS3转换 6-7 作业题

108

收起

3回答

HotDeath 2017-02-08 19:21:29

刚刚我试了一下，你这代码好像少点东西？

还是不行是指的什么？在浏览器中显示的是什么样子的？

收起回答

HotDeath 2017-02-07 17:44:12

<div class="sky">
        <div class="cloud"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="cloud cloud4"></div>
        <div class="cloud cloud5"></div>
</div>

和之前的那个五角星的问题方法差不多

使用

.cloud{ ... }
.cloud::before{ ... }
.cloud::after{ ... }

来画出第一朵云

再使用

.cloudX{
    transform: translate(?,?) scale(?);
    position:absolute;
}

来控制其余四朵云的位置，并改变其大小

收起回答

提问者 Holajulie #1

ok,谢谢。

2017-02-07 21:55:09
提问者 Holajulie #2

我试了试，结构层是这样：<div class="sky"> <div class="cloud">  <div id="cloud1"></div> <div id="cloud2"></div> <div id="cloud3"></div> <div id="cloud4"></div> <div id="cloud5"></div> </div> 绘制好了云朵，然后控制单独云朵的样式层是这样： #cloud2{ position:absolute; -webkit-transform:translateX(500px);/*控制位置方法一：平移*/ } .sky > .cloud > #cloud3{ /*控制位置方法2：margin*/ display:block; -webkit-transform:translate(90px,50px); } 但是还是不行。

2017-02-08 19:16:43
提问者 Holajulie #3

嗨呀！我懂了。绘制cloud只是绘制单独的cloud而不是一起绘制它里面的其他五个div，是吧？

2017-02-08 19:23:11

点开查看后面1条评论

小于飞飞 2017-02-06 18:11:23

根据你简单描述思路ok，说下我的思路：

白云处理，可以有一个div，其里面有五个div（代表五朵云），而每朵云的形成是一样的，所以可以使用云div及div的::after和::before为元素组合来实现云的形状。
每个div设置不同的class, 在分别这是设置位置与大小。

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

提问者 Holajulie #1

谢谢，您的意思是绘制用大的div,控制用小的div吗？

2017-02-07 10:29:03
提问者 Holajulie #2

but我这样做了，<div class="sky"> <div class="cloud">  <div id="cloud1"></div> <div id="cloud2"></div> <div id="cloud3"></div> <div id="cloud4"></div> <div id="cloud5"></div> </div> #cloud2{ position:absolute; -webkit-transform:translateX(500px);/*控制位置方法一：平移*/ } .sky > .cloud > #cloud3{ /*控制位置方法2：margin*/ display:block; -webkit-transform:translate(90px,50px); } 通过cloud绘制好了云朵，但是单独控制还是控制不了，不知道是我的选择器错了吗？我用了两种方法都不行欸？

2017-02-08 19:14:28
提问者 Holajulie #3

懂了懂了不用回答了

2017-02-08 20:24:52