html – 创建响应式云形状

我一直在为一个项目在CSS中创建响应式的云形状.由于HTTP请求和响应速度的要求,我试图不用图像,CSS或内联SVG这样做.

所讨论的形状将是：(但可以相似 – 轻微的变化/改进会很酷)：

我发现这两个问题,但似乎不符合我的确切需求：

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

正如你所看到的那样,我遇到了很多问题,反应速度和计算速度正是高度/宽度所需要的.

我也试图将HTML的数量保持在绝对的最小值,所以真的更喜欢使用单个div或者短的SVG代码.

解决方法

可以使用SVG中的单个路径元素在SVG中创建云形状. SVG本质上是可扩展的,而不会对形状造成任何扭曲. browser support for SVG是非常好的,并且可以使用VML提供IE8和更低(如果需要)的后备.

形状创作

用于绘制形状及其含义的命令如下：

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

html – 创建响应式云形状

解决方法

相关文章