如何使用 CSS 将形状组合成一个云来创建云?
How to create a cloud by combining shapes into one using CSS?
所以我主要尝试使用 div 和 CSS 创建云。我有几个形状为圆形或斑点的 div,我的想法是将它们合并为一个,使它们看起来像一朵云。
.cloud-body{
width:250px;
height:200px;
background: linear-gradient(blue,blueviolet);
margin-left: 30%;
margin-top:20%;
border-radius:50%;
}
.blob1{
width: 100px;
height: 100px;
background: blue;
border-radius:50%;
position:relative;
bottom: 200px;
left: 60%;
}
.blob2{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 200px;
left: 150px;
}
.blob3{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 400px;
left: 400px
}
<div class="wrapper">
<div class="cloud-body"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
然而,它们看起来就像是不同的 blob 堆叠在一起(正如 div 所预期的那样)。将它们结合起来或更具体地说是使每个形状之间的边界消失的方法是什么?
这是我正在处理的代码笔上的 link 到 pen for this。
我建议使用这个 css 云:
.cloud, .cloudshadow {
width: 350px; height: 120px;
background: #3498db;
border-radius: 100px;
position: relative;
margin: 150px 50px;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
content: '';
position: absolute;
background: #3498db;
z-index: 1
}
.cloud:after, .cloudshadow:after {
width: 100px; height: 100px;
top: -50px; left: 50px;
border-radius: 100px;
}
.cloud:before, .cloudshadow:before {
width: 180px; height: 180px;
top: -90px; right: 50px;
border-radius: 200px;
}
<div class="cloud">
<div class="cloudshadow"></div>
</div>
响应云:
svg {
height: 50%;
width: 50%;
}
path {
fill: #3498DB;
stroke: #3498DB;
stroke-width: 2;
stroke-linejoin: round;
}
path:hover {
fill: aliceblue;
stroke: lightskyblue;
}
<svg viewBox='0 0 105 105'>
<path d='M 25,60
a 20,20 1 0,0 0,40
h 50
a 20,20 1 0,0 0,-40
a 10,10 1 0,0 -15,-10
a 15,15 1 0,0 -35,10
z' />
</svg>
这样做:
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>
</title>
<style>
.cloud-body {
width: 250px;
height: 200px;
background: linear-gradient(blue, blueviolet);
border-radius: 50%;
}
.blob1 {
width: 130px;
height: 100px;
background: blue;
border-radius: 50%;
}
.blob2 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
.blob3 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
div.cloud-body,
div.blob1,
div.blob2,
div.blob3 {
float: left;
}
.my-4 {
margin-top: 2.4rem !important
}
</style>
</head>
<body>
<div style="display: inline;">
<div class="cloud-body "></div>
<div class="blob1 my-4 "></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
您可以考虑多种背景,以一种元素来创建您的云。您可以轻松添加任意大小和位置的任意数量的 circle/ellipse。半径的一个值将给出一个圆,两个值将给出一个椭圆
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:
/* radius position / 2xradius*/
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
/* base of the cloud */
linear-gradient(blue,blue) bottom/100% 40px;;
background-repeat:no-repeat;
}
<div class="cloud"></div>
如果您想要渐变作为着色,您可以使用 mask
来实现。您只需使用先前在遮罩内定义的渐变 属性:
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:linear-gradient(60deg,red,blue);
-webkit-mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
<div class="cloud"></div>
所以我主要尝试使用 div 和 CSS 创建云。我有几个形状为圆形或斑点的 div,我的想法是将它们合并为一个,使它们看起来像一朵云。
.cloud-body{
width:250px;
height:200px;
background: linear-gradient(blue,blueviolet);
margin-left: 30%;
margin-top:20%;
border-radius:50%;
}
.blob1{
width: 100px;
height: 100px;
background: blue;
border-radius:50%;
position:relative;
bottom: 200px;
left: 60%;
}
.blob2{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 200px;
left: 150px;
}
.blob3{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 400px;
left: 400px
}
<div class="wrapper">
<div class="cloud-body"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
然而,它们看起来就像是不同的 blob 堆叠在一起(正如 div 所预期的那样)。将它们结合起来或更具体地说是使每个形状之间的边界消失的方法是什么? 这是我正在处理的代码笔上的 link 到 pen for this。
我建议使用这个 css 云:
.cloud, .cloudshadow {
width: 350px; height: 120px;
background: #3498db;
border-radius: 100px;
position: relative;
margin: 150px 50px;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
content: '';
position: absolute;
background: #3498db;
z-index: 1
}
.cloud:after, .cloudshadow:after {
width: 100px; height: 100px;
top: -50px; left: 50px;
border-radius: 100px;
}
.cloud:before, .cloudshadow:before {
width: 180px; height: 180px;
top: -90px; right: 50px;
border-radius: 200px;
}
<div class="cloud">
<div class="cloudshadow"></div>
</div>
响应云:
svg {
height: 50%;
width: 50%;
}
path {
fill: #3498DB;
stroke: #3498DB;
stroke-width: 2;
stroke-linejoin: round;
}
path:hover {
fill: aliceblue;
stroke: lightskyblue;
}
<svg viewBox='0 0 105 105'>
<path d='M 25,60
a 20,20 1 0,0 0,40
h 50
a 20,20 1 0,0 0,-40
a 10,10 1 0,0 -15,-10
a 15,15 1 0,0 -35,10
z' />
</svg>
这样做:
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>
</title>
<style>
.cloud-body {
width: 250px;
height: 200px;
background: linear-gradient(blue, blueviolet);
border-radius: 50%;
}
.blob1 {
width: 130px;
height: 100px;
background: blue;
border-radius: 50%;
}
.blob2 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
.blob3 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
div.cloud-body,
div.blob1,
div.blob2,
div.blob3 {
float: left;
}
.my-4 {
margin-top: 2.4rem !important
}
</style>
</head>
<body>
<div style="display: inline;">
<div class="cloud-body "></div>
<div class="blob1 my-4 "></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
您可以考虑多种背景,以一种元素来创建您的云。您可以轻松添加任意大小和位置的任意数量的 circle/ellipse。半径的一个值将给出一个圆,两个值将给出一个椭圆
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:
/* radius position / 2xradius*/
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
/* base of the cloud */
linear-gradient(blue,blue) bottom/100% 40px;;
background-repeat:no-repeat;
}
<div class="cloud"></div>
如果您想要渐变作为着色,您可以使用 mask
来实现。您只需使用先前在遮罩内定义的渐变 属性:
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:linear-gradient(60deg,red,blue);
-webkit-mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
<div class="cloud"></div>