这样之后怎么设置变成云的样子呢
来源：2-14 项目作业
qq_慕前端8286166
2019-04-22 12:06:55
.one{
width:100px;
height:30px;
border:1px solid black;
position: absolute;
left:50%;
transform:translate(-50%,0);
top:30px;
border-radius: 25px;
background-color: #FFFFFF;
}
.one:before{
content: '';
width:50px;
height:50px;
border-radius:50%;
position: absolute;
left:65%;
transform:translate(-50%,0);
top:30px;
display: block;
border:1px black solid;
background-color: #FFFFFF;
}
.one:after{
content:'';
width:50px;
height:15px;
border-radius:13px;
position:absolute;
border:1px black solid;
background-color: #FFFFFF;
position: absolute;
left:50%;
transform:translate(-50%,0);
top:30px;
transform: rotate(30deg)
}
3回答
-
好帮手慕夭夭
2019-04-23
你好同学，当使用定位调整元素位置时，不能同时使用left和right，这样的话只有left生效。如果想要云彩从左到右移动，默认使用left，值大于100%即可超出屏幕了，也实现了隐藏在屏幕右侧。参考如下：
设置云彩初始位置为110%隐藏在右侧，然后动画结束位置为left:-300px ，left为负值让元素往左移动隐藏在屏幕左侧哦
祝学习愉快 ，望采纳。
0 -
好帮手慕糖
2019-04-22
同学你好，位置也是需要调整的哦，如上的代码图就是老师根据你的调整的哦，你可以参考自己在调整下哦。
希望能帮助到你，祝学习愉快！
0h019-04-22 -
好帮手慕糖
2019-04-22
同学你好，可以调整为如下这种形式哦，边框需要去掉，另，位置弄动下就可以了。
这里老师按照你的调的，你可以参考下哦，例：
希望能帮助到你，祝学习愉快！
0h019-04-22
相似问题