纯CSS/CSS3制作的动画小demo
在Github上看到了wesbos的一个Javascript30天挑战的repo,旨在使用纯JS来进行练习,不允许使用任何其他的库和框架,该挑战共30天,我会在这里复现这30天遇到的挑战与问题,将其教程化、视频化分享给大家。实例在我学习过程中有所补充,具体实例多于30个。
在线查看JS30所有项目效果图
Day01 - JavaScript Drum Kit
![](https://camo.githubusercontent.com/887841a7dadc49dcbe93cfd782ed2f55475da1284c75f2efa36d2cd9721c4b68/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c302e6a7067)
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/02%20-%20JS%20and%20CSS%20Clock/image/GIF.gif?raw=true)
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/03%20-%20CSS%20Variables/GIF.gif?raw=true)
Day04 - Array Cardio Day 1
![](https://camo.githubusercontent.com/c2c565141e09e4ef48a9f5eaa928fd1d575812d9e54ff546cddbb23fe712f5bb/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c332e6a7067)
Day05 - Flex Panel Gallery
![](https://camo.githubusercontent.com/11a271c6136e2e5e4f18964ad2cf76c19b754c3aa17a67a424755cb5f4612bfd/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c342e6a7067)
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/06%20-%20Fetch%E3%80%81filter%E3%80%81%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%BF%AB%E9%80%9F%E5%8F%A4%E8%AF%97%E5%8C%B9%E9%85%8D/DemoGIF.gif?raw=true)
Day07 - Array Cardio Day 2
![](https://camo.githubusercontent.com/e5db9e1a9c701d8738a60cc2b9fed7b18b793537d05e9719b1ef62a4799426e3/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c362e6a7067)
Day08 - Fun with HTML5 Canvas
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/08%20-%20HTML5%20Canvas%20%E5%AE%9E%E7%8E%B0%E5%BD%A9%E8%99%B9%E7%94%BB%E7%AC%94%E7%BB%98%E7%94%BB%E6%9D%BF/GIF.gif?raw=true)
Day09 - Dev Tools Domination
![](https://camo.githubusercontent.com/6d946abf23a13bbaaad1d0af2812db4e793a6d712fb5decbdb2a7c321e180b53/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c382e6a7067)
Day10 - Hold Shift and Check Checkboxes
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/10%20-%20JS%20%E5%AE%9E%E7%8E%B0%20Checkbox%20%E4%B8%AD%E6%8C%89%E4%BD%8F%20Shift%20%E7%9A%84%E5%A4%9A%E9%80%89%E5%8A%9F%E8%83%BD/GIF.gif?raw=true)
Day11 - Custom Video Player
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/11%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A8/GIF.gif?raw=true)
Day12 - Key Sequence Detection
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/12%20-%20%E9%94%AE%E7%9B%98%E8%BE%93%E5%85%A5%E5%BA%8F%E5%88%97%E7%9A%84%E9%AA%8C%E8%AF%81%E6%8C%87%E5%8D%97/GIF.gif?raw=true)
Day13 - Slide in on Scroll
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/13%20-%20%E5%9B%BE%E7%89%87%E9%9A%8F%E5%B1%8F%E5%B9%95%E6%BB%9A%E5%8A%A8%E8%80%8C%E6%BB%91%E5%85%A5%E6%BB%91%E5%87%BA%E7%9A%84%E6%95%88%E6%9E%9C/demoshow/GIF.gif?raw=true)
Day14 - JavaScript References VS Copying
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/14%20-%20JavaScript%20%E5%BC%95%E7%94%A8%E5%92%8C%E5%80%BC%E6%8B%B7%E8%B4%9D/showpicture.PNG?raw=true)
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/15%20-%20LocalStorage/GIF.gif?raw=true)
Day16 - Mouse Move Shadow
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/16%20-%20%E7%A7%BB%E5%8A%A8%E9%BC%A0%E6%A0%87%E8%AE%A9%E5%AD%97%E4%BD%93%E5%91%88%E7%8E%B0%E5%BD%A9%E8%99%B9%E6%95%88%E6%9E%9C/show.PNG?raw=true)
Day17 - Sort Without Articles
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/17%20-%20%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F/show.PNG?raw=true)
Day18 - Adding Up Times with Reduce
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/18%20-%20Day18%20-%20Reduce%E3%80%81Map%E6%B7%B7%E5%90%88%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E6%97%B6%E5%88%86%E7%A7%92/show.PNG?raw=true)
![](https://camo.githubusercontent.com/cb0a5c58ac5309876450f41846c7ef38237df03e6ce63305d3004ddfe3059ce7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31382e6a7067)
![](https://camo.githubusercontent.com/6df538a533fe9d09906650bf092a719f5159c53f340d336e26a4268f4408f71e/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31392e6a7067)
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/21%20-%20Geolocation/show.PNG?raw=true)
Day22 - Follow Along Link Highlighter
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/22%20-%20Follow%20Along%20Link%20Highlighter/SHOWGIF.gif?raw=true)
![](https://camo.githubusercontent.com/a20e32adb621089d9e6548ec8b5bff75d840f8fbbcaf4bf91c1dcdff559fde48/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32322e6a7067)
![](https://camo.githubusercontent.com/b4452f38eaf68e5e841b187270fd09d591012c0ca1d5e1feed9e39b777500a8a/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32332e6a7067)
Day25 - Event Capture, Propagation, Bubbling and Once
![](https://camo.githubusercontent.com/d948942c37f630b75f3f8be03759409e066cd3177b43f947704953b3395a66c4/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32342e6a7067)
Day26 - Stripe Follow Along Nav
![](https://camo.githubusercontent.com/c268d049057dfb8ce6a52f9428f50e536782841d2969a21f10b9f4584b9ecdd7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32352e6a7067)
![](https://camo.githubusercontent.com/24683fe6a3e70ab760b04fc7dcbc3bdfea206467abccafa9f9c9b1e41ad067bd/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32362e6a7067)
Day28 - Video Speed Controller
![](https://camo.githubusercontent.com/da8305c9b110fe348a814c2607014a058cecd347dc0e59fd85c3bd826891e818/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32372e6a7067)
![](https://camo.githubusercontent.com/11c1930469ddb71fe483d7e71299df9ac85ec5312432d3584fe6833340b3726d/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32382e6a7067)
![](https://camo.githubusercontent.com/4d1130d1c9659999fefaa7f4eeffd5857a0f61bde9a7ca2624176bc43b9eb793/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32392e6a7067)
Day31 - Canvas CountdownClock
![](https://github.com/SUNNERCMS/30daysJavascript/raw/master/31%20-%20Canvas%20CountClock/image/GIF.gif?raw=true)
本人博客:https://sunzhaoxiang.com
欢迎关注微信公众号:一线开发