MARTIAN的博客

CSS进阶（七）过渡与动画文章目录CSS进阶（七）过渡与动画一、缓动效果背景弹跳动画cubic-bezier()函数二、闪烁效果三、打字效果解决方案四、状态平滑的动画背景一、缓动效果背景回弹效果：指当一个过渡达到最终值时，往回倒一点，然后再次回到最终值，如此往复一次或多次，并逐渐收敛，最终稳定在最终值。回弹效果的作用：尺寸变化角度变化弹跳动画我们希望小球下落方向上的调速函数是加速的（easy-out）。而弹起方向是减速的（ease-in）@keyframes bounce {

CSS进阶（六）结构与布局文章目录CSS进阶（六）结构与布局一、自适应内部元素解决方案二、精确控制表格列宽解决方案三、根据兄弟元素的数量设置样式场景解决方案根据兄弟元素的数量范围来匹配元素四、满幅的背景，定宽的内容背景解决方案五、水平居中和垂直居中（重点）5.1 水平居中5.2 垂直居中基于绝对定位的解决方案基于视口单位的解决方案1. 视口单位基于flexbox的解决方案（最佳）六、紧贴底部的页脚Flexbox方案（推荐）一、自适应内部元素解决方案CSS内部与外部尺寸模型：http://w3.org

CSS进阶（五）用户体验文章目录CSS进阶（五）用户体验一、选用合适的鼠标光标1. 提示禁用状态2. 隐藏鼠标光标二、扩大可点击区域背景解决方案三、自定义复选边框解决方案：开关式按钮四、通过阴影来弱化背景问题背景伪元素方案box-shadow方案backdrop方案五、通过模糊来弱化背景六、滚动提示解决方案七、交互式的图片对比控件CSS resize方案一、选用合适的鼠标光标光标：http://w3.org/TR/css3-ui/#cursor 1. 提示禁用状态:disabled,[

CSS进阶（四）字体排印文章目录CSS进阶（四）字体排印一、连字符断行二、插入换行解决方案：补充：三、文本行的斑马条纹问题背景：如何给文本加上斑马条纹解决方案：四、调整tab的宽度问题背景：解决方案：五、连字六、华丽的&符号解决方案：补充：unicode-range七、自定义下划线解决方案：7.1 实线下划线7.2 虚线下划线八、现实中的文字效果8.1 凸版印刷效果适用场景：原理：案例1（中等亮度底，深色字）：案例2（深色底，浅色字）：8.2 空心字效果方法一：使用多个text-shadow方法二

CSS进阶（三）视觉效果一、单侧投影box-shadow语法box-shadow: inset x-offset y-offset blur-radius spread-radius color;box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;用法解释：box-shadow：2px 3px 4px rgba(0,0,0,.5);投影的绘制过程：以该元素相同的尺寸和位置，画一个rgba(0,0,0,.5)的矩形将其向右移动2px，向下移动

文章目录一、自适应的椭圆1、自适应椭圆2、半椭圆3、四分之一椭圆二、平行四边形方法一：嵌套元素方案方案二：伪元素方案（更好）三、菱形图片方法一：基于变形的方案方法二：裁剪路径方案扩展：clip-path制作动画三、切角效果方法一：css渐变（1）切一个角（2）切两个角（3）切四个角（4）弧形切角（内凹圆角）方法二：内联SVG与border-image方案方法三：裁切路径方案（可使用任意类型的背景）三种方法的比较四、梯形标签页（1）普通梯形（2）标签页梯形五、饼图1、基于transform的方案（1）进度指示

CSS进阶（一）背景与边框文章目录CSS进阶（一）背景与边框一、浏览器前缀二、CSS编码技巧1、尽量减少代码重复（可复用性）（1）当某些值相互依赖时，应该把他们的相互关系用代码表示出来（2）有时，代码易维护和代码量少不可兼得（3）currentColor（4）继承2、相信你的眼睛，而不是数字3、响应式网页设计A、媒体查询三、边框1、HSLA颜色2、半透明边框3、多重边框（一）box-shadow方案（二）outline方案四、灵活的背景定位1、background-position的扩展语法方案2、bac