草庐IT

html - 创建响应式云形状

coder 2023-08-01 原文

我一直在尝试在 CSS 中为一个元素创建响应式云形状。由于 HTTP 请求和响应要求，我尽量不对图像、CSS 或内联 SVG 执行此操作。

有问题的形状是这样的:(但可以相似 - 轻微的变化/改进会很酷):

我已经找到了这两个问题，但它们似乎并不适合我的确切需求:

我曾尝试(但失败了)用 border 或 box-shadow 创建云，我需要知道这是否可以通过 CSS 或作为替代方案，内联 SVG。我还看到 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 中的单个 path 元素创建云形状。 SVG 本质上是可缩放的，不会对形状造成任何扭曲。 browser support for SVG非常好，可以使用 VML 提供 IE8 和更低版本(如果需要)的回退。

形状创作

绘制形状时使用的命令及其含义如下:

  • M 25,60 - 此命令将笔移动到 X 轴原点 (0,0) 前面 25px 和 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,20 1 0,0 0,-40 - 与第二个命令类似，这将创建另一个圆弧，其半径在任一轴上均为 20px，其终点相对于之前为 40px前一点。所以本质上这会创建一个从 (75,100) 到 (75,60) 的弧。这个和第二个命令一起形成了云两侧的弧。
  • a 10,10 1 0,0 -15,-10 - 另一个 arc 命令，用于创建云的 flex 顶部的一部分。半径为 10px，弧度为 (75,60) 到 (60,50)。
  • a 15,15 1 0,0 -35,10 - 完成云的最后弧线。半径为 15px，弧度为 (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,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>

使用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,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 -36,10  
           z' filter='url(#shadow)' />
</svg>

关于html - 创建响应式云形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30919053/

html创建codesection39csssvgcss-shapes

有关html - 创建响应式云形状的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  5. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  6. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  10. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

随机推荐