js病毒樣式動畫效果（js病毒樣式動畫效果怎麼樣）

本文目錄一覽：

• 1、css動畫和js動畫有什麼區別
• 2、怎麼用js觸發css3動畫
• 3、用JavaScript做一個模擬計算機病毒效果，當打開一個頁面時，會不停地彈出窗口
• 4、JS 怎麼動態設置CSS3動畫的樣式
• 5、JS寫的彈出DIV層，帶動畫效果，背景可選還是不可選？

css動畫和js動畫有什麼區別

js動畫可以寫自己的邏輯控制速度，大小等，css動畫沒有複雜的邏輯，，這裡有介紹。

怎麼用js觸發css3動畫

你用CSS3的方式預先寫好動畫樣式，不調用這個class,前端中設置鼠標經過增加一個class，這樣鼠標指向的時候就有CSS3的動畫，鼠標離開去除樣式動畫結束

用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

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，記得好評和採納，互相幫助，謝謝。

JS寫的彈出DIV層，帶動畫效果，背景可選還是不可選？

應該不需要遮蓋，給這個div一個隱藏的樣式，寫一個鼠標經過顯示這個ID的div就可以了