主页 / 问题

全部问题

Martin Hope
Alexandr_TT
Asked: 2025-01-28 22:41:54 +0000 UTC
  • 8

尝试弄清楚 CSS 和 SVG 动画如何交互。为此，我采用了最简单的场景：

  1. 角色从右向左移动，同时上下移动（svg）
  2. 旋转 180 度 (css) 并
  3. 向后移动至左右 (css)

以下是代码：

body { perspective: 1000px;}

  .container{
  width:80vw;
  height:80vh;
}  
#SnowMaiden {
transform-box:fill-box;
transform-origin: center center;
animation: Maiden_rotate 2s linear 8s  forwards, Maiden_translate 14s linear 16s forwards;
}
@keyframes Maiden_rotate {
0%{ transform:  rotate3d(0,1,0,20deg);}
50%{ transform:  rotate3d(0,1,0,80deg);}
100%{ transform:  rotate3d(0,1,0,180deg);}
}
@keyframes Maiden_translate {
0%{ transform:  translate3d(300px,10px,10px);}
50%{ transform:  translate3d(800px,10px,10px);}
100%{ transform:  translate3d(1400px,10px,10px);}
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 

       <!-- Фон с ёлочкой -->
    <image id="img1" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" opacity="1"   />  
    
    <image  id="SnowMaiden" x="1400" y="650"  xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png" opacity="0">
                  <!-- Анимация появления девочки с корзинкой -->
   <animate id="op1_Maidan" attributeName="opacity"   values="0; 1" dur="2s" begin="svg1.click"  repeatCount="1" fill="freeze" restart="whenNotActive" />   
                            <!-- Перемещение  по горизонтали -->
  <animate id="Go_Maidan" attributeName="x"   values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"  restart="whenNotActive"  />   
                         <!-- Перемещение по вертикали -->    
   <animate id="Go_Maidan_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"   restart="whenNotActive"  />  
</image>  
</svg>

从代码片段的结果可以看出：
180 度旋转之前的 SVG 动画阶段一切正常。故障在转弯后开始。看起来 CSS 动画与之前的 SVG 动画冲突，这就是 CSS 运动结果不可见的原因。
当然，您可以纯粹用 SVG 或仅使用 CSS 来实现动画。
我有一个问题，如何让 SVG 和 CSS 动画正确协同工作？

html
Martin Hope
BlackStar1991
Asked: 2025-01-25 05:57:56 +0000 UTC
  • 8

有一些SVG动画，<path>它在白色和黑色背景下沿着屏幕移动。是否可以使用 CSS/SVG，以便当 SVG 元素进入黑色背景时，其颜色变为白色？我认为可以使用mix-blend-mode以某种方式做到这一点但我还没有得到任何足够的结果。也许有人可以给出建议？

这是一个非常简单的例子

body{
  padding: 0;
  background: linear-gradient(90deg, #fff 50%, #00f 50%, #00f);
  display:grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

svg{
  mix-blend-mode: multiply;
}
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 50 L190 50" stroke="black"  fill="none"/>
</svg>

是否可以在不改变 html 的情况下将行的右侧部分变为白色？

css
Martin Hope
Камиль Газизов
Asked: 2025-01-21 00:21:23 +0000 UTC
  • 8

有一个关于使用permutationsitertools 库中的函数进行条件生成的问题：

有如下代码：

combinations = list(itertools.permutations([1, 2, 3], 3))

其执行结果我们得到：

(1, 2, 3), (1, 3, 2), (2, 1, 3), (2, 3, 1), (3, 1, 2), (3, 2, 1)

这些都是给定数字组合的所有可能变化。是否可以生成（即生成，而不是显示所有已生成的变量中所需的变量）指示它们应该开始的条件的特定变量？也就是说，像这样：

combinations = list(itertools.permutations([1, 2, 3], 3, only 1)

结果：

(1, 2, 3), (1, 3, 2)
python
Martin Hope
Diana Oryol
Asked: 2025-01-13 17:31:25 +0000 UTC
  • 8

了解 Python 中的装饰器。例子：

def count(f):
    total=0
        def decorated(*args, **kwargs):
            nonlocal total
            total+=1
            return f(*args, **kwargs), total
    return decorated

@count
def hello(name):
    return f"Привет, {name}!"


print(hello("Пользователь_1"))
print(hello("Пользователь_2"))

输出：

('Привет, Пользователь_1!', 1)
('Привет, Пользователь_2!', 2)

为什么要保存变量的值total？如果再次运行整个代码，则倒计时total再次开始0。

python
上一页
下一页