js病毒样式动画效果（js病毒样式动画效果怎么样）

发布时间：2023-12-08

js病毒样式动画效果（js病毒样式动画效果怎么样）

更新：2022-11-11 08:38

本文目录一览：

  1. css动画和js动画有什么区别
  2. 怎么用js触发css3动画
  3. 用JavaScript做一个模拟计算机病毒效果，当打开一个页面时，会不停地弹出窗口
  4. JS 怎么动态设置CSS3动画的样式
  5. JS写的弹出DIV层，带动画效果，背景可选还是不可选？

<a name="css动画和js动画有什么区别"></a> css动画和js动画有什么区别

js动画可以写自己的逻辑控制速度，大小等，css动画没有复杂的逻辑，，这里有介绍。

<a name="怎么用js触发css3动画"></a> 怎么用js触发css3动画

你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束

<a name="用JavaScript做一个模拟计算机病毒效果，当打开一个页面时，会不停地弹出窗口"></a> 用JavaScript做一个模拟计算机病毒效果，当打开一个页面时，会不停地弹出窗口

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>病毒小程序</title>
    <script>
      onload = function() {
        var b = document.body;
        setInterval(function() {
          var div = document.createElement("div");
          div.style.position = "absolute";
          div.style.border = "1px solid red";
          div.style.backgroundColor = "gray";
          div.style.left = Math.random() * 500 + "px";
          div.style.top = Math.random() * 500 + "px";
          div.style.zIndex = 11111111;
          div.style.width = "100px";
          div.style.height = "100px";
          div.innerHTML = "疯狂的兔子";
          b.appendChild(div);
        }, 1000);
      }
    </script>
  </head>
  <body>
  </body>
</html>

<a name="JS 怎么动态设置CSS3动画的样式"></a> JS 怎么动态设置CSS3动画的样式

像这种效果，你要想知道， 已经下载下来，你拆开看一下就知道了。 说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {
  0% { box-shadow: 0px 0px 0px #f00; }
  25% { box-shadow: 0px 0px 8px #f00; }
  50% { box-shadow: 0px 0px 0px #f00; }
  100% { box-shadow: 0px 0px 8px #f00; }
}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {
  -webkit-animation: tips 1s;
  -moz-animation: tips 1s;
}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。 ~如果你认可我的回答，请及时点击【采纳为满意回答】按钮
~~手机提问的朋友在客户端右上角评价点【满意】即可。
~你的采纳是我前进的动力
~~O(∩_∩)O，记得好评和采纳，互相帮助，谢谢。

<a name="JS写的弹出DIV层，带动画效果，背景可选还是不可选？"></a> JS写的弹出DIV层，带动画效果，背景可选还是不可选？

应该不需要遮盖，给这个div一个隐藏的样式，写一个鼠标经过显示这个ID的div就可以了

推荐文章