所讨论的形状将是：(但可以相似 – 轻微的变化/改进会很酷)：
我发现这两个问题,但似乎不符合我的确切需求：
> How to fill a text with color using CSS?
> CSS apply border to a cloud shape?
我尝试(并且失败了)创建一个具有边框或盒子阴影的云,并需要知道这是可能的CSS或作为替代,内联SVG. Ive也看过Canvas是一个选择,但我宁愿远离它,因为它可能相当复杂.
这是我可怜的尝试
body {
background: skyblue;
}
.cloud {
width: 15%;
height: 10vh;
background: white;
position: relative;
margin: 100px 100px;
border-radius: 65px;
Box-shadow: black 0 0 10px 10px;
}
.cloud:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
top: -60px;
left: 100px;
border-radius: 75px;
background: white;
}
.cloud:before {
content: '';
position: absolute;
width: 70px;
height: 70px;
background: white;
left: 50px;
top: -30px;
border-radius: 35px;
}
<div class="cloud"></div>
正如你所看到的那样,我遇到了很多问题,反应速度和计算速度正是高度/宽度所需要的.
解决方法
形状创作
用于绘制形状及其含义的命令如下：
> M 25,60 – 此命令将笔移动到X轴上的原点(0,0)和Y轴上原点前方60px的点. (注：该命令用大写字母表示,表示绝对运动而不是相对运动).
> a 20,20 1 0,0 0,40 – 此命令创建一个弧,其X和Y半径为20像素.圆弧起点为(25,60),终点为(25,100)(即X轴为0px,Y轴为40px).
> h 50 – 此命令绘制一个相对于起始点前进50像素的水平线.由于它是相对的,终点将在(75,100).
> a 20,-40 – 类似于第二个命令,这创建另一个弧,其半径在任一轴上为20像素,其终点相对于上一点为40像素.所以本质上将会产生一个从(75,100)到(75,60)的电弧.这和第二个命令一起形成云的两边的弧.
> a 10,10 1 0,0 -15,-10 – 另一个弧形命令来创建云的弯曲顶部的一部分.半径为10像素,圆弧为(75,60)至(60,50).
> 15,15 1 0,0 -35,10 – 完成云的最后弧.半径为15像素,圆弧为(60,50)至(25,60). (25,60)是原来的起点,从而完成了形状.
> z – 关闭路径.
svg {
height: 50%;
width: 50%;
}
path {
fill: white;
stroke: black;
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,40 h 50 a 20,-40 a 10,-10 a 15,10 z' /> </svg>
使用SVG的优点
>它们易于创建和维护
>这些命令很简单,可以理解并且不需要复杂的定位或者攻击
>默认情况下,它们是可扩展(响应)的
>只要SVG是内联的,就不需要额外的HTTP请求
更好地控制弧线,半径等
>悬停效果(如下面的代码片段所示)可以被限制为仅在鼠标位于形状边界内时触发.
>可以以无忧的方式添加额外的效果.也就是说,您可以模拟屏幕上绘制的形状的行为.
额外效果 – 云图动画
以下是一个带有云图动画的示例代码段,其中通过重复递减路径的stroke-dashoffset属性直到其变为0来绘制路径.初始偏移值等于使用getTotalLength计算的路径的总长度() 方法.云的形状也增加了一个模糊的阴影.
使用window.requestAnimationFrame方法实现动画.
window.onload = function() {
var offset;
var path = document.getElementsByTagName('path')[0];
var len = path.getTotalLength();
function paint() {
path.style.strokeDashoffset = len;
path.style.strokeDasharray = len + ',' + len;
animate();
}
function animate() {
if (!offset) offset = len;
offset -= 0.5;
path.style.strokeDashoffset = offset;
if (offset < 0)
window.cancelAnimationFrame(anim);
else anim = window.requestAnimationFrame(function() {
animate();
});
}
paint();
};
svg {
height: 40%;
width: 40%;
}
path {
fill: white;
stroke: black;
stroke-width: 2;
stroke-linejoin: round;
}
path:hover {
fill: aliceblue;
stroke: lightskyblue;
}
<svg viewBox='0 0 105 105'> <filter id='shadow'> <feGaussianBlur in='SourceAlpha' stdDeviation='2' /> <feOffset dx='2' dy='0' result='blur' /> <feMerge> <feMergeNode in='blur' /> <feMergeNode in='SourceGraphic' /> </feMerge> </filter> <path d='M 25,0 -36,10 z' filter='url(#shadow)' /> </svg>
