- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创造一种烟雾从容器中冒出的效果
就像这个咖啡杯冒烟的例子
但我做不到。
这是一个展示我尝试的 jsfiddle:
SVG代码为:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="127px" viewBox="0 0 150 127" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Mobile-Portrait" transform="translate(-98.000000, -419.000000)" fill="#FFFFFF">
<g id="food_loading" transform="translate(98.000000, 419.000000)">
<path d="M139.06,95.2449167 C134.53,70.4159167 113.7925,50.6875833 87.3925,45.9089167 C87.435,45.5355833 87.5,45.1599167 87.5,44.7889167 C87.5,38.3559167 81.8925,33.12225 75,33.12225 C68.1075,33.12225 62.5,38.3559167 62.5,44.7889167 C62.5,45.1599167 62.5625,45.5355833 62.6075,45.9089167 C36.2075,50.6875833 15.47,70.4159167 10.94,95.2449167 C5.715,98.00525 0,102.067583 0,106.624583 C0,118.489583 38.78,126.457917 75,126.457917 C111.22,126.457917 150,118.489583 150,106.624583 C150,102.067583 144.285,98.00525 139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 Z M67.515,45.1925833 C67.505,45.05725 67.5,44.9219167 67.5,44.79125 C67.5,40.9319167 70.865,37.79125 75,37.79125 C79.135,37.79125 82.5,40.9319167 82.5,44.79125 C82.5,44.92425 82.495,45.05725 82.485,45.1925833 C82.3675,45.1809167 82.25,45.17625 82.135,45.1645833 C81.275,45.0759167 80.41,45.0129167 79.54,44.9569167 C79.22,44.9359167 78.9025,44.9055833 78.5825,44.88925 C77.3975,44.8285833 76.205,44.7935833 75.0025,44.7935833 C73.8,44.7935833 72.6075,44.8285833 71.4225,44.88925 C71.1025,44.9055833 70.785,44.9359167 70.465,44.9569167 C69.595,45.0129167 68.73,45.07825 67.87,45.1645833 C67.75,45.17625 67.6325,45.1785833 67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 Z M63.3625,59.9859167 C63.545,59.9859167 63.73,59.96725 63.915,59.9299167 C67.51,59.1739167 71.2275,58.79125 74.9675,58.79125 L75,58.79125 C76.38,58.79125 77.5,57.74825 77.5,56.46025 C77.5,55.1699167 76.3825,54.1245833 75,54.1245833 L74.965,54.1245833 C70.8575,54.1245833 66.77,54.5469167 62.815,55.3775833 C61.4675,55.6599167 60.6225,56.90825 60.925,58.1659167 C61.19,59.2509167 62.22,59.9859167 63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 Z M24.5525,98.41825 C24.705,98.44625 24.855,98.4579167 25.0025,98.4579167 C26.1875,98.4579167 27.24,97.66925 27.46,96.5445833 C30.0575,83.24925 38.6425,71.41925 50.425,64.9045833 C51.6125,64.2489167 52.005,62.81625 51.3025,61.7079167 C50.5975,60.5995833 49.065,60.23325 47.8775,60.8889167 C34.8675,68.0825833 25.3975,81.0979167 22.5425,95.7045833 C22.2925,96.9739167 23.1925,98.18725 24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 Z M65.9975,50.0879167 C67.34,49.90125 68.69,49.7659167 70.045,49.66325 C70.3225,49.64225 70.6,49.6235833 70.8775,49.6049167 C73.6225,49.43225 76.38,49.43225 79.125,49.6049167 C79.4025,49.6235833 79.68,49.64225 79.9575,49.66325 C81.3125,49.7659167 82.6625,49.90125 84.005,50.0879167 C110.05,53.7629167 130.6475,73.1225833 134.385,97.4919167 C134.5,98.2409167 134.5925,98.99225 134.675,99.7435833 C134.7025,100.002583 134.74,100.25925 134.765,100.51825 C134.8625,101.551917 134.935,102.585583 134.97,103.61925 C95.695,112.114917 54.31,112.114917 15.035,103.61925 C15.0725,102.585583 15.1425,101.551917 15.24,100.51825 C15.265,100.25925 15.3,100.002583 15.33,99.7435833 C15.4125,98.9899167 15.505,98.2385833 15.62,97.4919167 C19.355,73.1225833 39.9525,53.7605833 65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 Z M75,121.79125 C32.26,121.79125 5,111.83025 5,106.624583 C5,105.730917 6.185,103.761583 10.16,101.192583 C10.15,101.325583 10.155,101.45625 10.145,101.58925 C10.06,102.867917 10,104.155917 10,105.457917 L10,107.296583 L11.9175,107.72825 C32.5525,112.34825 53.7775,114.662917 75,114.662917 C96.2225,114.662917 117.4475,112.350583 138.0825,107.72825 L140,107.296583 L140,105.457917 C140,104.155917 139.94,102.87025 139.855,101.58925 C139.845,101.45625 139.85,101.325583 139.84,101.192583 C143.815,103.761583 145,105.730917 145,106.624583 C145,111.83025 117.74,121.79125 75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 Z"
id="food"></path>
<path d="M73.375,27.77425 C73.8625,28.22925 74.5025,28.4579167 75.1425,28.4579167 C75.7825,28.4579167 76.4225,28.22925 76.91,27.77425 C77.8875,26.8619167 77.8875,25.38725 76.91,24.4749167 C74.3725,22.10425 74.3725,18.2495833 76.91,15.8789167 C79.085,13.8489167 80.285,11.1515833 80.285,8.28158333 C80.285,5.41158333 79.0875,2.71425 76.91,0.68425 C75.9325,-0.228083333 74.3525,-0.228083333 73.375,0.68425 C72.3975,1.59658333 72.3975,3.07125 73.375,3.98358333 C74.605,5.13158333 75.285,6.65758333 75.285,8.28158333 C75.285,9.90558333 74.6075,11.4315833 73.375,12.5795833 C68.8875,16.7679167 68.8875,23.5859167 73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
<path d="M100.875,41.77425 C101.3625,42.22925 102.0025,42.4579167 102.6425,42.4579167 C103.2825,42.4579167 103.9225,42.22925 104.41,41.77425 C105.3875,40.8619167 105.3875,39.38725 104.41,38.4749167 C101.8725,36.10425 101.8725,32.2495833 104.41,29.8789167 C106.585,27.8489167 107.785,25.1515833 107.785,22.2815833 C107.785,19.4115833 106.5875,16.71425 104.41,14.68425 C103.4325,13.7719167 101.8525,13.7719167 100.875,14.68425 C99.8975,15.5965833 99.8975,17.07125 100.875,17.9835833 C102.105,19.1315833 102.785,20.6575833 102.785,22.2815833 C102.785,23.9055833 102.1075,25.4315833 100.875,26.5795833 C96.3875,30.7679167 96.3875,37.5859167 100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
<path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z"
id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path>
</g>
</g>
</g>
</svg>
CSS 是:
.food-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 1.5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
最佳答案
要使虚线偏移线绘制技巧起作用,您需要有一条仅由笔画组成的“线”。您的 Steam 管线实际上是封闭的形状,路径围绕管线的外侧运行。因此,您将获得一条围绕 Steam 线外部运行的动画线,而不是获得您想要的 Steam 效果。
你现在拥有的是:
.food-path {
stroke-dasharray: 69;
stroke-dashoffset: 69;
animation: dash 1.5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 69;
}
to {
stroke-dashoffset: 0;
}
}
<svg width="400px" height="400px" viewBox="20 0 60 60">
<path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path>
</svg>
首先,您需要将 SVG 加载到编辑器中,然后将这些 Steam 线重新绘制为一条粗的波浪线。
你想在你的绘图中更像这样:
.food-path {
stroke-dasharray: 31;
stroke-dashoffset: 31;
animation: dash 1s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 31;
}
to {
stroke-dashoffset: 0;
}
}
<svg width="400px" height="400px" viewBox="20 0 60 60">
<path d="M 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path>
</svg>
其次,要使绘图效果起作用,您需要使用与线条长度相对应的破折号数组和破折号偏移值。您使用的“1000”对于您使用的线路来说太长了。查看我在示例中使用的值。
关于css - SVG 线条动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39805301/
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有两个 SVG 元素( SVG1 和 SVG2 ),其中 SVG1 是一个包含各种元素的大区域,会不时添加、删除和重新定位。另一方面,SVG2 需要用作 图标化表示(小) SVG1 的版本,非常小,但
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。 但是,这种方法似乎不适用
我正在尝试使用 Flutter SVG 依赖项,我将 svg 放入 Assets 中,在 pubspec.yaml 中设置,并在我的小部件中设置,但是,使用黑色容器加载 svg 我已经尝试过更改 sv
为什么这样的演示:http://jsbin.com/ejorus/2/edit,将元素嵌套在另一个元素内? JS
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形 每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
我试图将 play svg 居中放置在 SVG 圆圈的中间,但似乎不知道该怎么做。 垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
是否可以使用一个 SVG 形状作为另一个形状的填充? 最佳答案 您想使用 SVG Pattern .见 this example : 注意
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
我使用 require 的 SVG 没有显示。 在我的终端中,svg Assets 被发出并且路径在我的 html 中正确设置。 但是,SVG 不会显示,而其他格式(如 jpg 或 png)可以显示
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径,我想用公式组合它们:(1*2) + (3*4),即路径 1 和路径 2 应该使用乘法模式混合,类似地路径 3 和路径 4 应该使用混合相
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试,我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成,
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。 问题是什么?为什么
使用联合 js 在 svg 中创建了一个文本区域。但是,我无法在文本区域中输入任何文本。如何使文本区域可编辑? 代码: var graph = new joint.dia.Graph;
您可以不受限制地停止和重复动画,但如果您重新启动一个不确定的动画,它将失去其累积值并从初始值开始。 也许我应该用一个例子来澄清;拿这个动画: 如果我停止此动画,并开始影响同一对象旋转的不同动画(
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中),在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异? 我正在考虑将某种动画从一张图片变成一张完全不同
logo的turtlegraphics的svg路径中是否有等价物? 而不是硬编码的 x 和 y 坐标,这也迫使我在移动更相对的“增量”方法时调整控制点。 我的解决方案应该适用于 FOCS(Firefo
目前正在使用 SVG 元素与一堆 元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题,但没有任何效果。这是一个带有针迹的圆圈的代码:
我是一名优秀的程序员,十分优秀!