随笔分类 - css
摘要：结合 Framework7 和ios UI系统，微信weUI，支付宝H5 我们在移动端一些css用法 细节的有了更深的了解； 高斯模糊的显示效果，ios8以上支持，ios8以上0.5px，backdrop-filter: blur(10px)等新的属性被支持； 适当利用伪元素 比如menu 菜单ic
阅读全文
摘要：什么是 像素渲染流水线 web页面你所写的页面代码是如何被转换成屏幕上显示的像素的。这个转换过程可以归纳为这样的一个流水线，包含五个关键步骤； 1.JavaScript：一般来说，我们会使用JavaScript来实现一些视觉变化的效果。比如用jQuery的animate函数做一个动画、对一个数据集进
阅读全文
摘要：总结一下： 有点：网易新闻，微信 热文 都是 -webkit-overflow-scrolling: touch;实现，css实现，轻巧； bug： 部分安卓浏览器（uc，自带） 只支持持续滑动，不支持回弹， iphone垂直滑动 第一次不能完全持续滑动到底部；总体不影响使用； 偶尔低端的手机会卡，
阅读全文
摘要：Retina屏的移动设备如何实现真正1px的线？ 在retina屏下面，如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
阅读全文
摘要：fixed元素，常见网站右侧出现一个返回顶部的按钮，滚动的时候，会发现返回顶部这个区域在不停的进行重绘，而返回顶部是position:fixed定位的。这也解释了为什么fixed定位是最耗性能的属性之一 如何查看元素在不停的重绘呢？Chrome渲染分析工具 Rendering； 如上图，按F12调出
阅读全文
摘要：使用iScroll时，input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.querySelectorAll('input, select, button')).forEach(functi
阅读全文
摘要：font-size:12px; line-height:22px; font-family:Arial,Helvetica,sans-serif; /*优化*/ font:12px/22px Arial,Helvetica,sans-serif; background-color:#eee; bac
阅读全文
摘要：雪佛兰手机版官网的菜单略微有点缺点；布局上的缺点；自己稍微完善一下； 样式有点丑； 动画帧也是可以实现；比较简单点；不过我没弄； 下面效果图： css布局及原理： <!doctype html> <html> <head> <meta charset="utf-8"> <title>雪佛兰</tit
阅读全文
摘要：效果： 关键点：利用keyframes 原理：infinite 注意点：在处理关键帧动画的时候，注意处理好 总共花费的 animation-duration：time 与每帧延延迟的时间的交错；要让动画显得层次感，处理好 每帧的延迟时间； 多注意时间的穿插 ；效果更很好；下面只是我的小插图；画的不一
阅读全文
摘要：translateZ()变糊 第一种情况： 当translateZ(m)中的 m设置为 非整数，1.5px 之类的，字体会模糊，但是不明显;和浏览器渲染，字体格式，或者操作系统有关， 这个 css中 只能尽量避免非整数的；js 中 用Math.floor(m)或者Math.cail(m)避免就好;
阅读全文
摘要：首先看一下效果图; 效果1，主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .five b {transform: scale(0); opacity: 0;} .five:hover b {tran
阅读全文
摘要：首先看一下效果图; 效果1，主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .one a {transform: translateY(100px); opacity:0;
阅读全文
摘要：css3 3d动画 keyframes 前 后 上 bottom 左 右 ...
阅读全文
摘要：上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件； css3 的时代，css3--动画 一切皆有可能； 传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件； tra
阅读全文
摘要：主要知识点：rotate旋转以及 outline透明的像素消除（明显降低）火狐旋转是产生的 锯齿 首先看结构： 结构上没啥特别的，注意 里面的 front 和back 用绝对位置；以防出现问题 直接用 HTML5 API里：classList； 在HTML5 API里，页面DOM里的每个节点上都有一
阅读全文
摘要：注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合， 利用 锚点对应 id ， 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本 其实还可以利用 css3：target 实现 ，这里就不多做介绍，原理差不多，都是锚点，兼容ie9+ //以下是源代码 拷贝观察即可
阅读全文
摘要：利用 锚点原理 以及overflow:hiden 结合，实现纯 css tab 方式 兼容ie6 + 适合单个tab 不需要js 注意点 红色方框的 a 对应a 必须是 name 如果别的 必须是id 可见我下一篇 css Tab选项卡2 //以下是源代码 <!doctype html><html>
阅读全文
