-
$(".bird").transition({ 'right': "3rem", }, 10000,'linear',function(){ alert("結(jié)束") });查看全部
-
CSS3的Animation有八個屬性 animation-name ：動畫名 animation-duration：時間 animation-delay：延時 animation-iteration-count：次數(shù) animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態(tài) animation-timing-function：關(guān)鍵幀變化查看全部
-
rem相對于根元素html和font-size進(jìn)行計算，em相對于父元素font-size進(jìn)行計算。 16px = 1 rem。查看全部
-
技術(shù)2查看全部
-
技術(shù)1查看全部
-
設(shè)計思路2查看全部
-
設(shè)計思路1查看全部
-
$("#spinner") .css({ "transform": "rotateY(-" + angle + "deg)", "transition":"1s" }) .css({ "-moz-transform": "rotateY(-" + angle + "deg)", "-moz-transition":"1s" })查看全部
-
/** * 開窗 * @return {[type]} [description] */ pageA.prototype.openWindow = function(callback) { var count = 1; var complete = function() { ++count if (count === 2) { callback && callback(); } } var bind = function(data) { data.one("transitionend webkitTransitionEnd", function(event) { data.removeClass("window-transition") complete() }) } bind(this.$leftWin.addClass("window-transition").addClass("hover")) bind(this.$rightWin.addClass("window-transition").addClass("hover")) }查看全部
-
繪制形狀 在svg中繪制多邊形的標(biāo)簽是polygon，這是SVG中定義的基本形狀，可以通過polygon的points繪制出多邊形組成的坐標(biāo)點，points 屬性定義多邊形每個角的 x 和 y 坐標(biāo)。多邊形至少要有3個邊，所以points至少要定義3組坐標(biāo)才能創(chuàng)建一個三角圖形?？梢杂^察下points中是由6組坐標(biāo)繪制的一個五角星圖（當(dāng)然我是用工具生成的坐標(biāo)） 填充顏色 默認(rèn)svg會用是黑色填充顏色，所以我們需要設(shè)置新的顏色。一般可以通過fill填充顏色。同時svg也是dom節(jié)點也可以通過style直接用樣式屬性設(shè)計元素的樣式。這里填充顏色用到了linearGradient元素。 線性漸變 使用linearGradient元素即可定義線性漸變，每一個漸變色成分使用stop元素定義 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient> 1. 漸變色元素必須要放到defs元素中； 2. 需要給漸變色元素設(shè)置id值，否則的話，別的元素?zé)o法使用這個漸變色。 3. 漸變色的成員使用stop定義，它的屬性也可以使用CSS定義；它支持class，id這種標(biāo)準(zhǔn)HTML都支持的屬性。其它常用屬性如下： offset屬性：這個定義了該成員色的作用范圍，該屬性取值從0%到100%(或者是0到1)；通常第一種顏色都是設(shè)置成0%，最后一種設(shè)置成100%。 stop-color屬性：這個很簡單，定義了該成員色的顏色。 stop-opacity屬性：定義了成員色的透明度。 x1,y1,x2,y2屬性：這兩個點定義了漸變的方向，默認(rèn)不寫的話是水平漸變，上面例子中同時也創(chuàng)建了一個垂直漸變。 4. 漸變色的使用，如例子中所示，直接用url(#id)的形式賦值給fill或者stroke就可以了。查看全部
-
窗口自適應(yīng) <script type="text/javascript"> //rem設(shè)置 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //寬與高度 document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>查看全部
-
/*云*/ .cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem; height: 1rem; width: 1rem; position: absolute; left: .5rem; top: 1.8rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; } @-webkit-keyframes cloudy { 50% { -webkit-transform: translateY(-0.1rem); } }查看全部
-
/*月亮*/ .moon { background: #FCF0BC; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 0 1.5rem #FCF0BC; position: absolute; left: 3.3rem; top: .8rem; -webkit-animation: nucleus 2s infinite linear; -moz-animation: nucleus 2s infinite linear; } /** * 光暈效果 */ @-webkit-keyframes nucleus { 0% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 1rem #FCF0BC; } 100% { box-shadow: 0 0 0 transparent; } }查看全部
-
/** * 圣誕樹 * animation: name duration timing-function delay iteration-count direction; */ .tree { width: 2.71rem; height: 4.24rem; z-index: 15; position: absolute; bottom: 0; left: 1rem; background-image: url(http://img1.sycdn.imooc.com//565d07d30001c97605420424.png); background-size: 200% 100%; -webkit-animation: treeAnim 1s steps(1,start) infinite; } @-webkit-keyframes treeAnim { 0% { background-position: 0% 100%; } 100% { background-position: -200% 100%; } } @-moz-keyframes treeAnim { 0% { background-position: 0% 100%; } 100% { background-position: -200% 100%; } }查看全部
-
//切換切換 document.querySelector("#page").addEventListener("change", function(e) { //頁面名稱 var pageName = e.target.value; switch (pageName) { case "page-b": //切換到b頁面，所以需要在當(dāng)前a頁面執(zhí)行動畫 //讓元素慢慢放大，所以需呀控制a元素 $(".page-a").addClass("effect-out") break; case "page-c": //切換到c頁面，所以需要在目標(biāo)c頁面執(zhí)行動畫 //因為讓要c頁面先放大，然后縮小 $(".page-c").addClass("effect-in") break; } }, false)查看全部
舉報
0/150
提交
取消