muzidigbig的博客

transform它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程transition过渡是一种样式转换到另一种样式时的效果animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作通常情况下，transform会与transition或animation结合使用，例如使用transition来实现平滑的旋转效果 ()，或者使用animation来创建更复杂的位移动画。单独使用transform只会改变元素的最终状态，而不会产生动画效果。

　　最近有点忘了position几个取值的内容，在这里简单总结一下。　　position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: static　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relative

布局：事先生成好的iconfont：<linkrel="stylesheet"href="http://at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">一个很简洁的布局： <div class="rate-content"> <input type="radio" name="rate"> <input type="radio" name="rate"&g...

Flexbox 是 flexible box 的简称（意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。place-items它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大...彻底搞懂flex: 1，flex: auto，flex: 0

HTML5中新增了progress标签，用来表示进度条&lt;!-- 进度条 --&gt;&lt;progress class="progress" value="20" max="100"&gt;&lt;/progress&gt;显示效果如下：其中CSS样式代码如下：.progress{ width: 300px; height: 20px; b..

css3的filter属性处理图片，让图片变幻莫测。filter属性值：1.blur(px)模糊;值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。2.brightness(%)亮度;如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。3.contrast(%)图像的对比度...

随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 优点:无需插件和手机主题,对移动设备友好,能...

假设一个显示文本的标签，溢出部分自动的显示“...”而不是写死的“...”，效果如下图：直接在文本所在的标签上设置下面样式： overflow: hidden; /*溢出隐藏*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/...

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。1.兼容性：clip-path之所以没有很普及，是因为其浏览器兼容问题。很多IE浏览器对齐属性不是很支持。我们看下他的浏览器兼容：...