css
关注
分享
扫一扫
sinat_32290679
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css3 实现进度条
css3实现圆圈进度条实现原理首先圆圈进度条是一直在旋转的，旋转我们可以利用的是css3的rotate(deg)实现rotate(deg):一个二维旋转的css3属性，作用是将指定元素旋转指定的角度,正值表示顺时针方向旋转，负值表示逆时针防线旋转，旋转的角度范围为(-360deg~360deg)。 一般的进度条的是长这样的 ; 这可以看成是一个圆弧在一直旋转，html中没有圆形标签，都原创 2017-08-12 14:58:22 · 1835 阅读 · 0 评论 -
css3 实现自由摆动的立方体
其效果图如下：https://zhijs.github.io/web/cubecss3实现自由摆动的立方体实现立方体，主要用到的css3动画属性有 translateX(a )/ translateY(a )/translateZ(a) 分别是往x,y,z方向移动a像素的距离rotateX(deg) / rotateY(deg)/ rotateZ(deg) 分别表示沿x,y,z轴旋转，原创 2017-08-12 17:59:08 · 640 阅读 · 1 评论 -
absolute元素实现居中方式
已知元素宽高 元素{ position:absolute; top:50%; left:50% width:100px; height:100px; margin-left:-50px; margin-top:-50px; }未知元素宽高或元素不定宽高 元素{ position:absolute; top:0; left:0; right:0;原创 2017-08-28 09:35:11 · 658 阅读 · 0 评论 -
nth-child()与nth-of-type()区别
nth-child()与nth-of-type()都是css3选择器，那么两者有什么区别呢？例如p:nth-child(n)表示选取父元素的下的第n个元素，且这个元素必须是p元素，如果父元素下第n个元素不是p元素。则该选择器将匹配失败。 第n个元素复合的情况下 <!DOCTYPE html><html><head><style> .test p:nth-child(3){backg原创 2017-08-27 16:44:05 · 469 阅读 · 0 评论 -
css设置容器占满屏幕
设置该元素的父元素，祖先元素的宽度和高度均为100%//防止产生空隙*{ margin:0; padding:0}html,body,目标元素的祖先元素{width:100%;heigght:100%;}目标元素{ width:100% height:100%}如果目标元素是行内元素(无法设置宽高)，可设置display为block最后css代码:*{ margin:原创 2017-08-27 18:57:48 · 9052 阅读 · 0 评论 -
absolute同时设置left，right,top,bottom
absolute同时设置left，right,top,bottom遵循以下原则如果top和bottom一同存在的话，那么只有top生效。如果left和right一同存在的话，那么只有left生效。原创 2017-08-28 09:10:49 · 3525 阅读 · 4 评论 -
css3动画相关
transform-origin设置动画的开始位置兼容性写法为 transform-origin:x y z; /*x,y,z可以是百分比和像素*/ -webkit-transform-origin:x y z; /* chrome safari*/ -moz-transform-origin:x y z; /*firefox*/ -o-transform-or原创 2017-08-28 16:05:07 · 319 阅读 · 0 评论 -
css3选择器(全）
1元素选择符E1~E2 选择前面有E1元素的 E2元素,两个元素可间隔其他元素。2属性选择符E[attribute^=”value”] 选择特定属性值以value开头的E元素。E[attribute$=”value”] 选择特定属性值以value结束的E元素。E[attribute*=”value”] 选择特定属性值以包含value值的E元素。伪类选择符E:first-of-t原创 2017-09-19 12:33:08 · 575 阅读 · 0 评论 -
viewport详解
在移动开发初期，我们可能会有以下的困惑在开发过程中，为何Iphone5的分辨率是 320px * 568px? 但对外宣称的分辨率却是 640 * 1136? 两者之间的关系是什么？它们之间是如何进行转化的？ viewport是啥？有什么作用？接下来就来围绕着这个几个问题进行解释一、首先是一些基本概念的解释1. px:css pixels 逻辑像素，浏览器使用的抽象单位。 即是不同的设备 1px原创 2017-11-21 19:02:48 · 2801 阅读 · 0 评论