動畫特效的原生 jQ和CSS3方法

最近一直在看運動的js特效，主要看的是原生寫法，太麻煩了，最終看到寫了個運動的方法，後面可以直接引用，然後發現這個方法和jq其實差不多了，**分別如下：

基本的hmtl和css

doctype html

>
<
html
>
<
head 
lang
="en"
>
<
meta 
charset
="utf-8"
>
<
title
>原生、jq和css3運動模組
title
>
head
>
<
style 
type
="text/css"
>
divstyle
>
<
body
>
<
div 
id='div1'
>
div>
<
div 
id='div2'
>
div>
<
div 
id='div3'
>
div>
body
>

//

原生寫法
window.onload=function
(); div21.onmouseover=function
() ;
div31.onmouseover=function
() ;
div11.onmouseout=function
() ;
div21.onmouseout=function
() ;
div31.onmouseout=function
() ;
};function
getstyle(obj, attr)
else}//
function getstyle(obj, attr) 
//運動框架
function
startmove(obj, attr, itarget)
else
var ispeed=(itarget-icur)/8;
ispeed=ispeed>0?math.ceil(ispeed):math.floor(ispeed);
if(icur==itarget)
else
else
}}, 30)
}

二、jq寫法

三、css3寫法

#div2#div1#div3#div1:hover#div2:hover#div3:hover

對比可以看出還是css3方法比較合適，通過原先的學習下原理，複雜的運動模式用jq,最優的選用css3（不考慮低版本ie的相容性的情況下）。

css3已經支援ie10及以上的版本。

css3的動畫特效

2017 12 20 14 22 49 saucxs 首先複習一下animation動畫新增各種引數 close hover before close hover before animation屬性引數中，延遲引數是我們較為常用的一種引數。當動畫的物件為多個時，我們常常用延遲引數來形成動畫序列。如...

CSS3動畫常見特效

transition all 2s 設定哪些屬性可以有過渡效果 all 所有的屬性 注意 並不是所有的屬性都可以過渡 transition property left,width transition duration 5s duration during 在 期間 設定完成過渡所需要的時間 tra...

css3的動畫特效之動畫序列（animation）

首先複習一下animation動畫新增各種引數 1 infinite引數，表示動畫將無限迴圈。在速度曲線和 次數之間還可以插入乙個時間引數，用以設定動畫延遲的時間。如希望使圖示在1秒鐘後再開始旋轉，並旋轉兩次，如下 close hover before程式設計客棧 2 alternate引數。ani...