Question

我有以下代码：

是否可以仅使用HTML和CSS来激活标签？仅当已激活时，<animate />的动画规则才会执行。例如，近年来是否有一些新的HTML CSS标准或将在2020年推出，这些标准将使我能够做类似<animate />的事情？还是别的幻想？

我想完全避免在项目中使用JavaScript来挑战和娱乐自己。

input:checked ~ svg animate {enabled:true;}

附加

我对其他选项持开放态度，这给人一种幻觉，直到选中输入字段，动画才开始运行。或者，也许还有一个与<body> <input type="checkbox" /> <svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none"> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> <image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" /> </pattern> </defs> <polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)"> <animate attributeName="points" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/> </polygon> </svg> </body>标签配合得很好的HTML元素，可以根据用户与网页的互动来启动和停止幻觉动画。

Answer 1

您可能会考虑一个技巧，即切换两个多边形的显示方式

.hide {
  display:none;
}

input:checked~svg .hide {
  display:block;
}
input:checked~svg .show {
  display:none;
}

<body>
  <input type="checkbox" >
  <svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
          </pattern>
        </defs>
        <polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="show">
        </polygon>
        <polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
            <animate attributeName="points" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
        </polygon>
    </svg>
</body>

或使用click事件。诀窍是要有两个矩形，一个用于开始，另一个用于结束。使用一些CSS，您可以使它们相互重叠，并使用z-index：

这是一个基本示例，您只需要找到一种使红色矩形看起来更好的好方法，因为这将是您必须单击的一种。

label {
  position:absolute;
  z-index:0;
}

input:checked + label {
 z-index:1;
}

<body>
  <input type="checkbox" id="input" >
  <label for="input"><svg viewBox="0 0 10 10" height="20">
        <rect id="stop" x=0 y=0 width="100%" height="100%" fill="red" />
  </svg></label>
  <label for="input"><svg viewBox="0 0 10 10" height="20">
        <rect id="start" x=0 y=0 width="100%" height="100%" fill="red" />
  </svg></label>

  <svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
          </pattern>
        </defs>
        <polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
            <animate attributeName="points" begin="start.click" end="stop.click"  dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
        </polygon>
    </svg>
</body>

如果您被纯CSS解决方案所困扰，只需几行代码即可轻松完成：

img {
  width: 400px;
  display:block;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 50% 0);
  animation:change 5s linear infinite paused;
}
input:checked + img {
  animation-play-state:running;
}

@keyframes change{
  50% {
    clip-path: polygon(50% 40%, 30% 60%, 80% 10%, 50% 70%)
  }
}

<input type="checkbox" >
<img src="https://picsum.photos/id/1000/800/800">

仅使用CSS和HTML激活<animate />标签？

1 个答案: