这几个月一直在录制前端的课程，每天关在小小的录播室里面对着话筒，对着屏幕录课，刚开始感觉挺心无旁骛，没有任何杂事影响我，可以专心的打磨课程。可是连续几个月的闭关，没有和周围的同事有什么交流，唯一沟通的就是负责视频剪辑的小妹，几个月后，感觉人越来越抑郁，关键是才录制完第一阶段，我就有种要憋疯的节奏。也...
2020年06月30日 3413
最近更新
CSS3案例集
爆裂的小爱心，为你的爱豆点赞！
翻到一个小案例，是当时做逐帧动画练习的时候随手完成的。不过这个小案例还是有点点用，有什么用？就是看到自己曾经喜欢过的明星的脸时还有那么一丝丝悸动，哈哈……点击图片看效果，为你喜欢的爱豆点个赞，就可以看...
2020年03月18日 784
杂谈
transform:translate(-50%,-50%)到底和margin-left:负的宽度的一半有什么区别？
今天在腾讯课堂上公开直播课的时候，遇到一个问题没有解决，特尴尬，左右排查代码已经是没有问题了，下课后，再仔细把代码改了改，突然发现原来是绝对定位后要居中对齐，我用了一种更新的方法导致的。就是下面这个效果，当把变色龙那个舞台居中对齐的时候，我用的是transform:translate(-50%,-5...
2020年02月19日 4693
CSS3案例集
小球弹跳理解三种animation动画形式
animation动画非常强大，快速掌握它多亏以前做过两年的flash开发，回想起十多年前用flash做动画的时候，曾经也有一个闪客梦，说这些话只能证明我老了！！点击查看具体效果。别小看这三个弹跳的小...
2020年02月18日 1031
CSS教程
flex布局space-between最后一行左对齐的方法
当用flex布局的时候，大部分的分布都会使用space-between的方式，但是当最后一行的个数和上面行的个数不一样的时候，最后一行的分布就显得尴尬。比如我们想要这样的效果：但是却出现这样的效果：如果每一行列数不确定，宽度不确定，间隔不确定的情况下，最好的方法就是为最后一个元素设置margin-r...
2020年02月04日 5633
JavaScript案例集
js原生代码实现无缝滚动循环播放幻灯片
幻灯片的代码可以很简单，也可以很复杂，普通的上一张下一张的幻灯片很容易做，但是最后一张要切换到第一张的时候，大部分都是从最后一张拉回到第一张，中间有长长的滑动，而要实现无缝循环播放，貌似最后一张后面又...
2020年01月15日 4708
CSS3案例集
media queries响应式完成导航菜单的切换
预算有限的公司，网站内容不太多的公司，都可以通过响应式实现一套代码覆盖PC到移动端，这也算是互联网从PC过渡到移动端的产物吧。现在绝大部分页面都在移动端了，PC端的项目更多的是与专业工作技能有关的，与...
2020年01月07日 775
CSS教程
利用CSS中display:table/table-cell可以解决大部分垂直居中、多列等高、自适应布局
尽管flex布局已经是大势所趋，但是IE11的支持都还不是很友好，在要兼容IE9的PC端，浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell，在一些特殊布局方面提供了很好的帮助，还是需要掌握。翻了很多文章，终于看到一篇介绍详细...
2019年12月11日 5582
CSS教程
这是我看到深入解释vertical-align最好的文章！
最近在备CSS基础的课程，以为很简单的事情，结果却在一些基本的概念上翻了车，有时候你以为简单的事情，其实你并不理解它的原理。在百度上翻了一下午，终于找到了一篇好文章，是翻译自国外的，很有意义，所以转载到自己博客上。这是中文的链接：你所不知道的vertical-align这是英文的链接：Vertica...
2019年12月02日 4741
JavaScript教程
DOM基础10：两个矩形的碰撞
学习了拖拽后，那么碰撞就是拖拽一个对象去碰另一个对象，检测是否碰上了。这里的碰撞是两个矩形对象的碰撞，如果是圆形或者不规则形状，方法又不一样了。这个小案例是拖动老鼠去碰撞灯，老鼠只能在可视区内移动，碰上了灯，灯变亮了。具体效果点击查看知识点：1、利用getBoundingClientRect( )方...
2019年09月17日 5223