摘要: 下面分别是html,css和js代码: 阅读全文
posted @ 2017-03-30 22:25 RachelChen 阅读(3835) 评论(0) 推荐(0) 编辑
摘要: 让我们看看如何使用css创建栅格覆盖(grid overlay),这是响应式的,且很容易用户自定义,使用的是css变量(和"css custom properties"相对应)。 grid overlay是开发者的工具,而不是对于用户而言的。所以我们不需要过多的担忧浏览器兼容问题。可以使用postC 阅读全文
posted @ 2017-03-30 22:14 RachelChen 阅读(2435) 评论(0) 推荐(0) 编辑
摘要: 使用代码制作一个加载旋转器spinner 实现的原理是: 1.两个圆圈,其中一个圆圈是使用pseudo元素(:before)产生 2.由pseudo元素生成的圆通过负数的z-index而作用在下面 3.由pseudo元素生成的圆圈有内置的阴影inset box-shadow 4.普通的圆圈有普通的阴 阅读全文
posted @ 2017-03-30 21:14 RachelChen 阅读(1535) 评论(0) 推荐(0) 编辑
摘要: 我们想要动画,但是在很多时候都是要先加载元素图片之后才能进行动画,有时候更惨的是图片加载一半或者一部分就进行了动画。如何解决?? ##问题:平行事件(parallel Events) 当我们在加载一个网站的时候,浏览器为了提高速度,浏览器会在加载和渲染html以及css的同事加载起来的内容,例如图片 阅读全文
posted @ 2017-03-30 20:55 RachelChen 阅读(1971) 评论(0) 推荐(0) 编辑
摘要: t's starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run 阅读全文
posted @ 2017-03-30 14:17 RachelChen 阅读(205) 评论(0) 推荐(0) 编辑
摘要: 设计给了效果图片 要实现的效果如下 鼠标hover在最后一个button出现一个 方法是 css: 做法是将包裹图片的div设置absolute的定位,图片的宽度设置成100%,高度根据原图片的宽高比来计算,js设置这个div的高度, 之后使用三个div分别布局到三个按钮上面。 也可使用map 阅读全文
posted @ 2017-03-30 13:58 RachelChen 阅读(324) 评论(0) 推荐(0) 编辑