-
polygon、defs、linearGradient 繪制形狀:polygon,這是SVG中定義的基本形狀,可以通過(guò)polygon的points繪制出多邊形組成的坐標(biāo)點(diǎn),points屬性定義多邊形每個(gè)角的x和y坐標(biāo)。多邊形至少要3個(gè)邊,所一points至少要定義3組坐標(biāo)才能創(chuàng)建一個(gè)三角圖形 填充顏色:默認(rèn)svg會(huì)用黑色填充,一般可以通過(guò)fill填充顏色,同時(shí)svg也是dom節(jié)點(diǎn)也可以通過(guò)style直接用樣式屬性設(shè)計(jì)元素的樣式。 linearGradient元素即可定義線性漸變,每一個(gè)漸變色成分使用stop元素定義 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="100%" stop-color="#FCF0BC"></stop> </linearGradient> 1、漸變?cè)乇仨毞诺絛efs元素中; 2、需要給漸變色元素設(shè)置id值,否則的話,別的元素?zé)o法使用這個(gè)漸變色 3、漸變色的成員使用stop定義,他的屬性也可以使用css定義;他支持class、id這種標(biāo)準(zhǔn)HTML都支持的屬性。其他常用屬性如下:offset屬性(這個(gè)定義了該成員色的作用范圍,該屬性取值從0%到100%;通常第一種顏色都是設(shè)置為0%,最后一種設(shè)置為100%) 4、漸變色的使用,直接使用url(#id)的形式復(fù)制給fill或者stroke就可以了查看全部
-
var audio = new Audio(url);//創(chuàng)建一個(gè)音頻對(duì)象并傳入地址 audio.loop = loop || false;//是否循環(huán) audio.play();//開始播放 var audio1 = HTML5Audio(playURL); audio1.end(function(){ Html5Audio(cycleURL.true); })查看全部
-
var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); //畫一條直線 ctx.moveTo(50,50); ctx.lineTo(200,200); ctx.stroke();查看全部
-
創(chuàng)建一個(gè)觀察者對(duì)象: var observer = new Obserber(); 通過(guò)subscribe方法,實(shí)現(xiàn)一個(gè)事件的觀察 observer.subscribe("任務(wù)名",處理函數(shù)) 通過(guò)publish觸發(fā)觀察時(shí)間,在任意時(shí)刻觸發(fā)了這個(gè)觀察的任務(wù)名,將會(huì)觸發(fā)這個(gè)事件訂閱subscribe方法 observer.publish("任務(wù)名") 取消事件訂閱,意味著不會(huì)執(zhí)行 observer.unsubscribe("任務(wù)名") 觀察者使用場(chǎng)合就是:當(dāng)以個(gè)對(duì)象的改變需要同時(shí)改變其它對(duì)象,并且它不知道具體有多少對(duì)象需要改變的時(shí)候,就應(yīng)該考慮使用觀察者模式。光差者模式所做的工作就是在解耦,讓耦合的雙方都依賴于抽象,而不是依賴于具體。從而使得各自的變化都不會(huì)影響到另一邊的變化。查看全部
-
var dtd=$.Deferred();//創(chuàng)建 dtd.resolve()//成功 dtd.then()//執(zhí)行回調(diào) dtd.then(function(){ //操作1 }).then(function(){ //操作2 }).then(function(){ //操作3 })查看全部
-
animation: name duration timing-function delay iteration-count direction fill-mode;查看全部
-
CSS3的Animation有八個(gè)屬性 animation-name :動(dòng)畫名 animation-duration:時(shí)間 animation-delay:延時(shí) animation-iteration-count:次數(shù) animation-direction:方向 animation-play-state:控制 animation-fill-mode:狀態(tài) animation-timing-function:關(guān)鍵幀變化查看全部
-
//綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);查看全部
-
Animation -name Animation duration查看全部
-
//綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);查看全部
-
rem是什么? rem和em單位一樣,都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來(lái)rem就繞開了復(fù)雜的層級(jí)關(guān)系,實(shí)現(xiàn)了類似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px,按照轉(zhuǎn)化關(guān)系 16px = 1rem查看全部
-
一.技術(shù)分解查看全部
-
編程思路: 1.rem的布局 2.幀動(dòng)畫的原理 3.面向?qū)ο蟮木幊?4..設(shè)計(jì)模式和異步代碼梳理 5.canvas繪圖、svg繪圖 6.精靈動(dòng)畫的實(shí)現(xiàn)及如何營(yíng)造3d效果查看全部
-
perspective(length) 為一個(gè)元素設(shè)置三維透視的距離。僅作用于元素的后代,而不是其元素本身。查看全部
-
總結(jié):呈現(xiàn)3d效果需要3部分 父元素或者當(dāng)前運(yùn)動(dòng)元素上設(shè)置透視角perspective,perspective屬性的值決定了3D效果的強(qiáng)度 3D視圖,設(shè)置在父元素上,子元素都可以相對(duì)與父元素的平面進(jìn)行3d變形操作 3D變形函數(shù),translate3d、scale3d、rotateX、rotateY、rotateZ等等查看全部
舉報(bào)
0/150
提交
取消