Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PikaPika

 PikaPika

簡報於前端魔法師八月份小聚

====
簡介
====

這場 talk 分享我用 CSS 畫皮卡丘的
小品故事!

============
簡報中參考連結
============

我的皮卡丘:
https://codepen.io/shiningjason1989/details/NALzYQ/

啟發這個作品的作品:
1. https://www.facebook.com/groups/f2e.tw/permalink/1039954716041893/
2. https://www.facebook.com/groups/f2e.tw/permalink/1042466265790738/
3. 小智與皮卡丘 - https://codepen.io/kevinjannis/pen/GyCgn
4. 小智與皮卡丘 - https://dribbble.com/shots/2565803-Pika

相關工具:
1. https://github.com/pixelass/to-pixels
2. https://github.com/buzzfeed/libgif-js
3. https://github.com/jvalen/pixel-art-react

=======
工商連結
=======

React Quick Tutorial:
https://github.com/shiningjason1989/react-quick-tutorial

「24 小時,快速入門 React」線上課程:
https://4cats.teachable.com/courses/24hrs-react-101

===========
我的聯絡方式
===========

Email:
[email protected]

Website:
https://shiningjason1989.github.io

GitHub:
https://github.com/shiningjason1989

shiningjason1989

August 03, 2016
Tweet

More Decks by shiningjason1989

Other Decks in Technology

Transcript

  1. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2);

    animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
  2. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2);

    animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
  3. .box { width: 10px; height: 10px; box-shadow: 0 10px 0

    #a6aaa9, 10px 0 0 #a6aaa8, 20px 20px 0 #ffffff; }
  4. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2);

    animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
  5. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2);

    animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
  6. var canvas = document.createElement('canvas'); var context = canvas.getContext(‘2d'); 
 context.drawImage(img,

    0, 0, width, height); const imageData = context.getImageData(0, 0, width, height); imageData.data; // [r,g,b,a,r,g,b,a…]
  7. #pika { animation: walk 1s infinite; } @keyframes walk {

    0%, 25% { box-shadow: …; } 25.01%, 50% { box-shadow: …; }
 50.01%, 75% { box-shadow: …; } 75.01%, 100%{ box-shadow: …; } }
  8. #pika { animation: walk 1s infinite; animation-timing-function: step-end; } @keyframes

    walk { 0%, 50%, 100% { box-shadow: …; } 25 { box-shadow: …; }
 75% { box-shadow: …; } }