个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
使用 div、shape 或 svgs 可以使元素 flex 以跟随路径的曲线。
这只是一个例子，但想象一下矩形在边缘 flex ，现在它只是从一帧到另一帧转了 90 度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>frame</title><style>
main {
width: 100vw;height: 100vh;position: absolute;
}
div {
display: none;position: absolute;will-change: offset-distance;width: 200px;
height: 40px;background: hsl(313,100%,50%);offset-anchor: top;
offset-rotate: auto;offset-path: path('M 0 0 L 600 0 L 600 400 L 0 400 L 0 0');
}
div:nth-of-type(4n+2) {background: hsl(343,100%,50%)}
div:nth-of-type(4n+3) {background: hsl(13,100%,50%)}
div:nth-of-type(4n+4) {background: rgb(37, 16, 226)}
body {margin: 0;padding: 0;}
svg, aside { display: none;}
div { display: block; }
* {box-sizing: border-box;}
</style>
</head> <body> <main><div></div> <div></div> <div></div> <div></div> <div></div><div></div> </main>
<script>
var rateRange = document.getElementById('playback-rate');
var shapers = [].slice.call(document.querySelectorAll('div'));
var DURATION = 200000;
var animations = [];
shapers.forEach(function(s, i) {
var animation = s.animate([
{offsetDistance: 0},
{offsetDistance: '100%'}
], {
duration: DURATION,
delay: -i / shapers.length * DURATION,
iterations: Infinity
});
animations.push(animation);
});
</script>
</body>
</html>最佳答案
这是一个 svg 解决方案。我正在使用 4 个重叠路径，其中笔划-dasharray 是这样的:stroke-dasharray: 2 2 2 2 2 2 2 2 2 242如果您将破折号和间隙相加，则总数为 260。
还有 stroke-linecap: round当破折号非常接近另一个 stroke-linecap: round使它们重叠，呈现连续线的外观。
路径的总长度也是 260。我正在动画 stroke.dashoffset路径的属性。
path {
fill: none;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 2 2 2 2 2 2 2 2 2 242;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -260;
}
}<svg viewBox="0 0 100 70" >
<path id="pth" stroke="red" d="M10,10L90,10L90,60L10,60z" />
<path stroke="blue" d="M70,10L90,10L90,60L10,60L10,10z" />
<path stroke="green" d="M90,60L10,60L10,10L90,10z" />
<path stroke="orange" d="M30,60L10,60L10,10L90,10L90,60z" />
</svg>#track .
path {
fill: none;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 2 2 2 2 2 2 2 2 2 225;
animation: dash 5s linear infinite;
}
#track {
stroke-width: 1;
stroke-dasharray: 245 0;
}
@keyframes dash {
to {
stroke-dashoffset: -245;
}
}
svg {
width: 300px;
}<svg viewBox="0 0 100 70">
<path id="pth" stroke="red" d="M27.000,10.000 Q37,10 47.000,10.000L80.000,10.000 Q90,10 90.000,20.000L90.000,50.000 Q90,60 80.000,60.000L20.000,60.000 Q10,60 10.000,50.000L10.000,20.000 Q10,10 20.000,10.000Z" />
<path stroke="blue" d="M90.000,27.000 Q90,37 90.000,47.000L90.000,50.000 Q90,60 80.000,60.000L20.000,60.000 Q10,60 10.000,50.000L10.000,20.000 Q10,10 20.000,10.000L80.000,10.000 Q90,10 90.000,20.000Z" />
<path stroke="green" d="M73.000,60.000 Q63,60 53.000,60.000L20.000,60.000 Q10,60 10.000,50.000L10.000,20.000 Q10,10 20.000,10.000L80.000,10.000 Q90,10 90.000,20.000L90.000,50.000 Q90,60 80.000,60.000Z" />
<path stroke="orange" d="M10.000,45.000 Q10,35 10.000,25.000L10.000,20.000 Q10,10 20.000,10.000L80.000,10.000 Q90,10 90.000,20.000L90.000,50.000 Q90,60 80.000,60.000L20.000,60.000 Q10,60 10.000,50.000Z" />
<path id="track" d="M90.000,27.000 Q90,37 90.000,47.000L90.000,50.000 Q90,60 80.000,60.000L20.000,60.000 Q10,60 10.000,50.000L10.000,20.000 Q10,10 20.000,10.000L80.000,10.000 Q90,10 90.000,20.000Z" stroke="black" />
</svg>关于css - 遵循路径的曲线矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63515685/
31
4
0
我正在尝试将外框内的框(坐标)放入。我已经使用交集联合方法完成了工作，并且我希望其他方法也可以这样做。 另外，能否请您告诉我如何比较这两个内盒？ 最佳答案 通过比较边界框和内部框的左上角和右下角的坐标
我希望输出看起来像这样: 如何安排这些循环以获得两个三角形数字模式？我该如何改进我的代码。 JAVA 中的新功能:-) for (int i = 1; icount; num--) {
我需要将 map 边界存储在 MySQL 数据库中。我花了一些时间在地理空间扩展的文档上，但是学习所有相关信息(WKT、WKB 等)很困难，而且就我而言没有必要。我只需要一种方法来存储坐标矩形并稍后将
在 gnuplot 中，我可以通过绘制一个矩形 set object rect from x0,y0 to x1,y1 如何从文件中读取坐标 x0,x1,y0,y1？ 最佳答案 一种方法是将设置矩形的
我正在尝试创建一个填充了水平线或垂直线的矩形。 矩形的宽度是动态的，所以我不能使用图像刷。 如果有人知道任何解决方案，请告诉我。 最佳答案 我想出了一个直接的方法来做到这一点；最后，我使用以下视觉画笔
这个 SVG 在所有浏览器中看起来都很模糊，在所有缩放级别。 在 Chrome、Safari 和 Firefox 中，它看起来像这样: 如果放大，您可以看到笔画有两个像素的宽度，即使默认笔画
我正在尝试在ggplot2图上添加多个阴影/矩形。在这个可重现的示例中，我只添加了3，但是使用完整数据可能需要总计一百。 这是我的原始数据的子集-在名为temp的数据框中-dput在问题的底部：
我有一个包含驻留在 Viewport3D 中的 3D 对象的应用程序，我希望用户能够通过在屏幕上拖动一个矩形来选择它们。 我尝试在 Viewport3D 上应用 GeometryHitTestPara
如何才能使 WPF 矩形的顶角变成圆角？ 我创建了一个边框并设置了 CornerRadius 属性，并在边框内添加了矩形，但它不起作用，矩形不是圆角的。 最佳答案 您遇到的问题是矩形“溢
我正在尝试使用此 question 中的代码旋转 Leaflet 矩形。 rotatePoints (center, points, yaw) { const res = [] const a
我有以下图像。 this image 我想删除数字周围的橙色框/矩形，并保持原始图像干净，没有任何橙色网格/矩形。 以下是我当前的代码，但没有将其删除。 Mat mask = new Mat(); M
我发现矩形有些不好笑: 比方说，给定的是左、上、右和下坐标的值，所有这些坐标都旨在包含在内。 所以，计算宽度是这样的: width = right - left + 1 到目前为止，一切都很合乎逻辑。
所以，我一直在学习 Java，但我还是个新手，所以请耐心等待。我最近的目标是图形化程序，这次是对键盘控制的测试。由于某种原因，该程序不会显示矩形。通常，paint() 会独立运行，但由于某种原因它不会
我正在阅读 website 中的解决方案 3 (2D)并试图将其翻译成java代码。 java是否正确请评论。我使用的是纬度和经度坐标，而不是 x 和 y 坐标(注意:loc.getLongitude
我似乎无法删除矩形上的边框!请参阅下面的代码，我正在使用 PDFannotation 创建链接。这些链接都有效，但每个矩形都有一个边框。 PdfAnnotation annotation; Recta
如何在保持原始位图面积的同时将位图旋转给定的度数。即，我旋转宽度:100，高度:200 的位图，我的最终结果将是一个更大的图像，但旋转部分的面积仍然为 100*200 最佳答案 图形转换函数非常适合这
我创建了矩形用户控件，我在我的应用程序中使用了这个用户控件。在我的应用程序中，我正在处理图像以进行不同的操作，例如从图像中读取条形码等。这里我有两种处理图像的可能性，一种正在处理整个图像，另一个正在处
好的，我该如何开始呢？ 我有一个应用程序可以在屏幕上绘制一些形状(实际上是几千个)。它们有两种类型:矩形和直线。矩形有填充，线条有描边 + 描边厚度。 我从两个文件中读取数据，一个是顶部的数据，一个是
简而言之: 我正在致力于使用 AI 和 GUI 创建纸牌游戏。用户的手显示在游戏界面上，我尚未完成界面，但我打算将牌面图像添加到屏幕上的矩形中。我没有找到 5 种几乎相同的方法，而是找到了一篇类似的文
我遇到了麻烦。我正在尝试使用用户输入的数组列表创建条形图。我可以创建一个条，但只会创建一个条。我需要所有数组输入来创建一个条。 import java.awt.Color; import java.a
我是一名优秀的程序员,十分优秀！