css3 - 随笔分类 - 清姿

CSS VS JS动画，哪个更快[译]

摘要：英文原文：https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者，Velocity.js是一个高效易用的js动画库。在《Javascript网页动画设计》一书中对这个库有很多更具体的剖析，对Velocity及阅读全文

posted @ 2016-07-04 21:11 清姿阅读(1535) 评论(1) 推荐(2) 编辑

移动端使用rem适配及相关问题

摘要：移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。 rem定义及浏览器支持情况 rem（font size of the root elem 阅读全文

posted @ 2016-06-21 18:58 清姿阅读(18239) 评论(0) 推荐(0) 编辑

Retina屏实现1px边框

摘要：问题描述通常我们实现边框的方法都是设置1px的边框，但是在retina屏上因为设备像素比的不同，边框在移动设备上的表现也不相同，例如在devicePixelRatio = 2的retina屏下会显示成2px。这对于拥有像素眼的设计同事来说是无法忍受的，他们会一眼看出这边框粗了很多(真可怕，不过经历阅读全文

posted @ 2016-05-17 14:25 清姿阅读(520) 评论(0) 推荐(0) 编辑

transition实现自定义tips淡入淡出效果

摘要：transition实现动画的时候，只能实现指定属性的渐变，元素显隐要通过opacity来实现：做了一个小的demo:transition-demo?Some information for help transition-property是用来指定当元素其中一个属性改变时执行transitio... 阅读全文

posted @ 2015-05-15 15:37 清姿阅读(2152) 评论(0) 推荐(0) 编辑

移动端页面布局相关问题

摘要：做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题： 1.图片及带背景图片的块宽高等比缩放布局 2.margin,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。 ... 阅读全文

posted @ 2015-05-11 20:43 清姿阅读(1695) 评论(3) 推荐(1) 编辑

CSS3之弹性布局

摘要：flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。... 阅读全文

posted @ 2015-01-06 20:10 清姿阅读(3872) 评论(1) 推荐(2) 编辑

CSS3之圆角

摘要：CSS3圆角border-radius也是比较常用的，有了圆角，可以少很多图片了:)语法：border-radius ： none | {1,4} [/ {1,4} ]?说明：length不可为负值。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径... 阅读全文

posted @ 2015-01-06 19:08 清姿阅读(374) 评论(0) 推荐(0) 编辑

CSS3之动画相关

摘要：CSS3动画相关的属性：transform,transition,animation.变形Transform语法：transform: rotate | scale | skew | translate |matrix;rotate:旋转，通过指定一个角度对原元素进行2D旋转，正值表示顺时针旋转，负... 阅读全文

posted @ 2015-01-04 20:14 清姿阅读(301) 评论(0) 推荐(0) 编辑

CSS3之阴影

摘要：CSS3中新增属性-阴影，可以做出很多漂亮的效果。文字阴影text-shadowtext-shadow属性值的顺序：text-shadow: h-shadow v-shadow blur color;参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。一个栗子： CSS3阴影 ... 阅读全文

posted @ 2014-12-30 20:11 清姿阅读(1488) 评论(2) 推荐(0) 编辑

CSS3之选择器

摘要：总结了下CSS3新增的一些选择器。CSS3的选择器有基本选择器、属性选择器、伪类选择器几类。CSS3选择器选择器举例例子描述element1~element2p~a选择前面有元素的每个元素。[attrtube^=value]a[src^="http"]选择其 src 属性值以 "https"... 阅读全文

posted @ 2014-12-29 19:28 清姿阅读(273) 评论(0) 推荐(0) 编辑

CSS长度单位

摘要：罗列了CSS中常用的长度单位及比较单位含义em相对于父元素的字体大小ex相对于小写字母"x"的高度rem相对于根元素字体大小px相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸ininch, 表英寸cmcentimeter, 表厘米mmmillimeter, 表毫米pt1/72英寸pc12... 阅读全文

posted @ 2014-12-25 19:54 清姿阅读(979) 评论(0) 推荐(0) 编辑

CSS垂直水平居中方法整理

摘要：CSS定位中常常用到垂直居中，比如覆盖层上的弹框。兼容性比较好的方法：Hello World!这个方法只适用于已知宽高的块，因为要设置负边距来修正。如果是未知尺寸的块，可以使用以下方法：Hello World!原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的ma... 阅读全文

posted @ 2014-12-11 22:40 清姿阅读(255) 评论(0) 推荐(0) 编辑

响应式设计的点点

摘要：移动web已经是大势所趋，所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序，那么，响应式设计也许是个不错的选择。不过，如果有条件并且需要移动端网页，移动端的很多优势还是不可替代的，比如定位功能。响应式设计，使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户... 阅读全文

posted @ 2014-12-02 19:30 清姿阅读(191) 评论(0) 推荐(0) 编辑

随笔分类 - css3