fb看人分享的,覺得裡面有很多選單特效就先記錄一下啦:D
http://www.hongkiat.com/blog/creative-css-animations/
星期二, 10月 25, 2016
星期二, 6月 21, 2016
[CSS 3] 描繪路徑
http://codepen.io/paintbycode/pen/JDbcF/
下拉Iron Man範例
如果要用Stroke效果來描述的話,需要計算path的數值。
下拉Iron Man範例
如果要用Stroke效果來描述的話,需要計算path的數值。
以下記錄一下計算的方法
純JS
var path = document.querySelector('path');
var length = path.getTotalLength();
jQuery的方法
var path = $('#目的元素').get(0);
var pathLen = path.getTotalLength();
星期日, 6月 12, 2016
[CSS] 使用css transition 做出underline的效果
作者示範了各種underline的動畫效果,有需要的朋友可以參考一下。
我的案例需要下圖中記錄的SlideIn效果。
http://bradsknutson.com/blog/css-sliding-underline/
我的案例需要下圖中記錄的SlideIn效果。
http://bradsknutson.com/blog/css-sliding-underline/
星期三, 5月 18, 2016
[CSS 3動畫] animation 語法動畫筆記
最近一些case需要使用大量的css動畫,把一些處理到的指令筆記一下
animation: name duration timing-function delay iteration-count direction;
animation-fill-mode : none | forwards | backwards | both;
none:不改变默认行为。
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。
animation的短指令
animation: name duration timing-function delay iteration-count direction;
定義動畫結束後如何停止最後一個狀態
animation-fill-mode : none | forwards | backwards | both;none:不改变默认行为。
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。
星期二, 4月 26, 2016
[CSS3] CSS transform/transition/animation 初學筆記
最近幫朋友弄了一個網站,需要使用很多CSS transition與animation的效果,
順道找了一些不錯的資訊學習,看完就可以馬上上手許多:D,很適合初學者們
參考如下:
https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html
超強transform解說:
https://desandro.github.io/3dtransforms/
順道找了一些不錯的資訊學習,看完就可以馬上上手許多:D,很適合初學者們
短語法
可用屬性
參考如下:
https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html
超強transform解說:
https://desandro.github.io/3dtransforms/
訂閱:
意見 (Atom)



