随笔分类 -  css

H5常用技巧
摘要：工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。 一、@support断定浏览器支持情况定义不同样式 @1像素边框 @sticky吸顶优化体验 sticky使用条件：sticky 元素只能在父容器内活动sticky 元素父容器不能含有overflow:hidden 和 overflow:a 阅读全文
posted @ 2016-06-03 18:02 小小平凡世界 阅读(1426) 评论(0) 推荐(0)
HTML5+CSS3 loading 效果收集－－转载
摘要：用gif图片来做loading的时代已经过去了，它显得太low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 这里收集了几十个用html5和css3实现的loading效果，以供学习参考。 Demo Download Demo Downlo 阅读全文
posted @ 2016-04-06 10:24 小小平凡世界 阅读(931) 评论(0) 推荐(0)
border-image使用过程中遇到的几个问题
摘要：这次年货，为了增添气氛，很多地方都用了边框，由于边框高度的不固定，给构建着实带了不小的麻烦。通常我们处理边框的方法，无非以下两种方案：1.切整张图片，做背景。2.切上中下，进行拼接处理。但是遇到，边框多种样式的时候，我可能就需要支招，切得手软，为了解决这些问题，我们尝试了border-image。使... 阅读全文
posted @ 2016-01-03 19:11 小小平凡世界 阅读(2804) 评论(0) 推荐(1)
H5填坑笔记--持续更新
摘要：最近一直在做移动端的页面，发现很多的坑，这里做一下总结，填填坑…… css常见的问题（一） 一、iOS键盘首字母自动大写 IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。 在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样： 二、iOS输 阅读全文
posted @ 2015-08-14 20:02 小小平凡世界 阅读(4494) 评论(8) 推荐(7)
webp图片优化
摘要：根据对目前国内浏览器占比与 WebP 的兼容性分析，大约有 50% 以上的国内用户可以直接体验到 WebP，如果你的网站以图片为主，或者你的产品基于 Chromium 内核，建议体验尝试。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iO... 阅读全文
posted @ 2015-07-05 19:07 小小平凡世界 阅读(1337) 评论(0) 推荐(0)
Css控制网页变灰
摘要：兼容IE chrome Firefox。。。。。html{ filter:grayscale(100%); -moz-filter:grayscale(100%); -o-filter:grayscale(100%); -webkit-filter:grayscale(1);} 阅读全文
posted @ 2015-07-03 16:58 小小平凡世界 阅读(287) 评论(0) 推荐(0)
不定宽高垂直居中分析
摘要：昨天做移动项目是，遇到这样一个案例，如图，图片容器随着视口宽度进行自由拉伸扩张，图片不定宽高，垂直居中： 当时做这个布局的时候，我一直想到用display:table-cell通过vertical-align:middle，来实现居中，可以当我在同一个节点用position:absolute，... 阅读全文
posted @ 2015-06-04 11:15 小小平凡世界 阅读(4844) 评论(9) 推荐(2)
stylie工具轻松搞定css3抛物线动画
摘要：自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，写动画也变的越来多越来越容易。可是当我们遇到需要利用数学公式的复杂动画时，却一筹莫展，只能怪小时候数学没学好（可能是语文老师教的）。那么问题来了，但我拿到要实现这样的需求，该如何：可能我们会去... 阅读全文
posted @ 2015-05-25 18:51 小小平凡世界 阅读(8862) 评论(0) 推荐(1)
css3 animation动画技巧
摘要：一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好，使用css3动画来制作动画的例子也越来越广泛，也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅，css3动画如何做弧线动画，css3动画是否有动画库，css3帧动画如何快速简单…… 为了... 阅读全文
posted @ 2015-05-14 07:32 小小平凡世界 阅读(2725) 评论(0) 推荐(1)
常用的sass编译库
摘要：@charset "UTF-8";/*引进图片合并给一个变量(后面会用到这个变量)*/$sprites:sprite-map("pwd/*.png",$spacing:8px,$layout: vertical);/*转换px到rem*/$browser-default-font-size : 20... 阅读全文
posted @ 2015-04-18 15:39 小小平凡世界 阅读(537) 评论(0) 推荐(0)
compass做雪碧图
摘要：由于最近没什么时间好好写博文，我把用sass做雪碧图的关键点贴出来方便自己记忆:config.rb注释# Set this to the root of your project when deployed:#配置服务器路径http_path = "http//:www.baidu.com/"#配置... 阅读全文
posted @ 2015-04-12 23:39 小小平凡世界 阅读(1121) 评论(0) 推荐(0)
写多个物件css3循环动画案例原理
摘要：在写h5页面中，我们可能经常遇到要写很多css3动画，有没有同学遇到多个物件同样的动画效果，循环保存步调一致呢，我就经常碰到，之前一直不知道其中的原理，只是简单的迁移改改，可是遇到稍微复杂多一点的就hold不住了，只能硬着头皮去分析其中的原理。那么接下来，让我们先看看案例，然后了解之中的原理cs... 阅读全文
posted @ 2015-04-03 16:48 小小平凡世界 阅读(1305) 评论(0) 推荐(0)
webapp新体验Rem实现移动端网页适配详解资源
摘要：本来想写一篇，webapp使用Rem的问题，查了一下相关rem的介绍之后，发现很多平台已经解释的很清楚了，图文并茂，于是我便想将其解释资源整理一些，方便以后自己查阅。 腾讯ISUX：web app变革之rem(解释的最精辟了) 大漠博客：CSS3的REM设置字体大小 小黑成长录：关... 阅读全文
posted @ 2015-03-09 10:03 小小平凡世界 阅读(4816) 评论(0) 推荐(2)
常用 CSS 中文字体 Unicode 编码表
摘要：为什么要在CSS中设置字体用字体 Unicode 编码 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。 为此，在 CSS直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器... 阅读全文
posted @ 2015-03-03 14:23 小小平凡世界 阅读(1129) 评论(2) 推荐(1)