圣诞树动画

Question

user281117

Asked:2020-02-19 18:39:59 +0000 UTC2020-02-19 18:39:59 +0000 UTC 2020-02-19 18:39:59 +0000 UTC

这些线是怎么画的？

772

是否可以强加background-th 然后绝对定位，还是有另一种快速正确的方法？

3 个回答

Voted

Alexandr_TT · Answer 1 · 2020-05-12T19:29:18Z

如果您想获得一个可在所有浏览器中使用的完全响应式图表，包括IE，那么您当然需要使用 SVG。

理想的选择是设计人员以矢量格式提供源数据，但如果它是光栅图像，则可以使用以下技术：

使用几行 svg 将光栅图像加载到矢量编辑器中。这是准确定位矢量元素相对于位图背景的位置所必需的。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="441" height="495" viewBox="0 0 441 495" > 
     <image xlink:href="SlalomTransp2.png" width="441" height="495" />
</svg>

我们需要得到一个path精确地重复位图上曲线形状的公式。为此，在矢量编辑器中，使用工具 -"рисовать кривые Безье"沿曲线添加锚点并移动锚点的手柄，我们在位图上的路径和曲线之间实现了精确匹配。
保存文件并path从中复制曲线公式。
接下来，我们创建空白横幅并将它们放在一个部分中 <defs>以供进一步重复使用
我们从存储中调用横幅并将其相对于曲线定位：

<use xlink:href="#banner" x="50" y="14" />

在横幅中放置文本

<text x="58" y="25" >Ноябрь 2017</text>

. 学习 SVG 的初学者可以掌握这项技术。
这有点费力，但它提供了不可否认的优势CSS

CSS offset-path只有实验技术支持曲线Chrome
在所有现代浏览器加上 svg 曲线都支持IE。
如有必要，很容易将一种横幅形式替换为另一种形式。
您可以在不影响布局的情况下更改曲线的形状。
该应用程序是完全响应的，并且在更改小工具的显示尺寸时布局永远不会中断。

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 441 495" preserveAspectRatio="xMinYMin meet">  

<defs>
<g id="banner">
<rect width="70" height="40" fill="#26365F"/> 
<polyline points="35,40 35,58" stroke="#45678B" stroke-width="1.5"/> 
<circle cx="35" cy="60" r="3" fill="none" stroke="#45678B" stroke-width="2"/>
</g>
<g id="banner2">
<polyline points="50,50 50,75" stroke="#45678B" stroke-width="1.5"/> 
<circle cx="50" cy="75" r="3" fill="none" stroke="#45678B" stroke-width="2"/>
<rect width="100" height="60" fill="#26365F"/> 
</g>
</defs>

<rect width="100%" height="100%" fill="#182037" />
<path fill="none" stroke="#45678B" stroke-width="1" d="m82.7 74c0 0 27.9-4.1 41.9-5.5 15.8-1.6 31.6-2.5 47.4-3.3 13.9-0.7 27.9-1.1 41.9-1.1 15.1 0 30.2 0.1 45.2 1.2 12.2 0.9 24.3 2.3 36.3 4.4 13 2.3 25.9 5 38.6 8.8 10.9 3.3 22.7 5.6 32 12.1 7.9 5.6 15.8 12.9 18.7 22 3 9.1 1.5 19.8-2.2 28.7-3.9 9.4-11.7 17.1-19.8 23.1-9.6 7.1-21.6 10.6-33 14.4-15.4 5.1-31.4 8.5-47.5 11-13.1 2-26.4 2.2-39.7 3.3-19.1 1.5-38.2 2.6-57.3 4.4-16.9 1.6-34 2.6-50.7 5.5-6.7 1.2-13.6 2.3-20 4.8-9.3 3.6-19.5 6-26.2 14.4-4.9 6.2-7.7 14.8-6.8 22.7 0.9 7.6 6.2 14.4 11.5 20 5.7 6 13.4 9.7 20.8 13.3 7.6 3.7 15.9 6.1 24 8.6 8.3 2.6 16.8 4.6 25.3 6.6 8.8 2.1 17.6 3.8 26.5 5.6 9.9 1.9 19.8 3.7 29.8 5.5 12.3 2.1 24.6 4.4 36.9 6.1 13 1.9 26.1 3.3 39.2 4.9 12.9 1.6 26 1.6 38.6 4.8 12.3 3.1 25.9 5.4 35.3 14 5.4 5 9.1 12.5 9.9 19.8 1.1 9.4-1 19.9-6.6 27.6-5.8 8-16.2 11.7-25.3 15.4-11.9 4.9-24.9 6.1-37.5 8.8-13.2 2.8-26.5 5.1-39.7 7.7-12.5 2.5-25.1 4.8-37.5 7.7-13 3.1-25.8 6.6-38.6 10.4-11.9 3.6-24 6.5-35.3 11.6-10.5 4.8-20.2 11.1-29.8 17.6-5.9 4-11.4 8.5-16.9 13.1-4 3.4-8.3 6.6-11.8 10.6-0.4 0.5-1.1 1.6-1.1 1.6" />

<use xlink:href="#banner" x="50" y="14" /> 
<use xlink:href="#banner" x="175" y="4" /> 
<use xlink:href="#banner" x="300" y="18" /> 
<use xlink:href="#banner" x="351" y="65" /> 
<use xlink:href="#banner" x="300" y="117" /> 
<use xlink:href="#banner" x="210" y="133" /> 
<use xlink:href="#banner" x="100" y="143" />
<use xlink:href="#banner" x="48" y="191" />
<use xlink:href="#banner" x="118" y="231" />
<use xlink:href="#banner" x="198" y="248" />
<use xlink:href="#banner" x="278" y="258" />
<use xlink:href="#banner" x="344" y="308" />
<use xlink:href="#banner2" x="200" y="343" /> 
<use xlink:href="#banner2" x="50" y="407" /> 
 
<g font-size="10" fill="#F0F0F0">
<text x="58" y="25" >Ноябрь 2017</text> 
<text x="53" y="40" >Запуск проекта</text>
<text x="182" y="15" >Декабрь 2017</text> 
<text x="186" y="30" >Инвестиции</text>
<text x="309" y="30" >Январь 2018</text> 
<text x="357" y="77" >Февраль 2018</text>
<text x="312" y="130" >Март 2018</text>
<text x="215" y="144" >Апрель 2018</text>
<text x="115" y="155" >Май 2018</text> 
<text x="60" y="215" >Июнь 2018</text> 
<text x="130" y="255" >Июль 2018</text>
<text x="208" y="270" >Август 2018</text>
<text x="281" y="280" >Сентябрь 2018</text> 
<text x="350" y="330" >Октябрь 2018</text>
<text x="225" y="365" >Ноябрь 2018</text>
<text x="201" y="385" >Окончательный выбор </text>
<text x="67" y="425" >Декабрь 2018 </text>
<text x="57" y="445" >Финишные работы </text>



</g>
</svg>

MaxWall · Answer 2 · 2020-05-11T20:51:10Z

CSS - 它最初是“平方的”，绘制直线和矩形。您可以圆角并从边界获得曲线 - 但在这种特殊情况下，您不应该变态。

.timeline {
  position: relative;
  margin: 20px;
  background-color: #172238;
}
.timeline__back {
  display: block;
  width: 100%;
  height: auto;
}
.timeline__info {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  position: absolute;
  width: 180px;
  padding: 15px;
  margin-top: -35px;
  color: #fff;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  background-color: #1e2b4b;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}
.timeline__item:before,
.timeline__item:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
}
.timeline__item:before {
  height: 30px;
  width: 1px;
  background-color: #52789c;
}
.timeline__item:after {
  height: 7px;
  width: 7px;
  margin: 30px 0 0 -4px;
  background-color: #172238;
  border: 1px solid #52789c;
  border-radius: 50%;
}
.timeline__item strong {
  display: block;
}
.timeline__item--01 {
  top: 49%;
  left: 50%;
}
.timeline__item--02 {
  top: 33%;
  left: 80%;
}
.timeline__item--03 {
  top: 75%;
  left: 24%;
}

<section class="timeline">
  <img class="timeline__back" src="http://war.webdrafts.ru/bg_line.svg">
  <ul class="timeline__info">
    <li class="timeline__item timeline__item--01">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur
    </li>
    <li class="timeline__item timeline__item--02">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit magnam, numquam
    </li>
    <li class="timeline__item timeline__item--03">
      <strong>Январь 2017</strong>Lorem ipsum dolor sit amet consectetur
    </li>
  </ul>
</section>

做这个：

0) 制作一个 div 包装器，位置 = 相对，背景为蓝色。

1）我们在其中放入一条曲线作为图片（不是背景） - 在 .svg 中（显示 = 块，宽度 = 100%，高度 = 自动）为什么不作为背景？因为图片会在宽度上扩展包装器并设置高度，“橡皮擦”会很方便。

2）还将ul列表（位置=静态）添加到包装器中，并且已经在其中包含文本的li（位置=绝对）。每个 li 将有两个类 - 第一个，让 .timeline__item （宽度，框架，背景，文本颜色 - 所有 li 都相同），第二个，每个人都不同 - 负责每个在包装器中的位置.timeline__item--01（左：22.7%；上：45%；）。如果您需要涂胶，则以百分比定位。

无需将文本塞入 svg 图像 - 搜索引擎可以忽略它们！

结果是什么？

背景中的图像设置了包装器的大小，它有一条曲线，这对于 css 来说是不寻常的。
在代码中 - 一个清晰的列表，其中包含列表形式的数据，seo - 批准）
在屏幕上 - 一切都安排妥当。我们通过 .timeline__item:before 做一个圆圈，从块到它的垂直线 - .timeline__item:after

在https://codepen.io/Valiev/pen/LmmjgL检查橡胶性

Areshka · Answer 3 · 2020-05-11T22:40:36Z

CSS 属性offset-path- 元素所在的曲线路径（SVG 格式），offset-distance- 与曲线起点的距离，以百分比表示。如果您需要水平对齐块 - 您有几何、JS 和transform-rotate)))

body {
  background-color: #333;
  padding: 0 4em;
  width: 100%;
}

svg, .box {
  position: absolute;
}

.box {
  height: 50px;
  width: 50px;
  offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
}

.one {
    background-color: red;
    offset-distance:15%;
}

.two {
    background-color: green;
    offset-distance:50%;
}

.three {
    background-color: blue;
    offset-distance:78%;
}

<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
  <path fill="none" stroke="#ffffff" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>

这些线是怎么画的？

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

这些线是怎么画的？

3 个回答

相关问题