html动态效果图代码

HTML动态效果图是指页面中所展示的图形、动画等元素随着用户操作而实时更新的效果。为实现这些效果，需要编写一些与JavaScript交互的代码。

<script>
  window.onload = function() {
    var elem = document.getElementById("myElem");
    elem.addEventListener("click",function() {
      this.style.color = "red";
      this.style.fontSize = "2em";
    });
  };
</script>

在这段代码中，我们给页面中的某一元素添加了点击事件的监听器。当此元素被点击时，该元素的颜色将变为红色，字体大小将变为2em。

除了监听事件，还可以使用动画库来实现更为复杂的动态效果。下面是一个使用jQuery库实现动画的例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#myBtn").click(function() {
      $("#myDiv").animate({height: "300px",width: "300px"},"slow");
    });
  });
</script>

在这段代码中，我们使用了jQuery的animate()方法。当按钮被点击时，我们的目标div元素将逐渐增大，直到高度和宽度都达到300px。

通过使用这些动态效果图代码，我们能够增强用户体验，使页面更加生动有趣。