本文详细介绍了CSS中的线性渐变、径向渐变、锐化边角、伪类选择器、浮动布局、2D变换属性如translate、scale、rotate以及transform-origin的使用方法。还涉及到了动画过渡效果、孩子选择器和否定选择器的运用，同时强调了透明度控制和定位技术。这些技巧在网页设计和前端开发中至关重要。
太极案例、折扇效果案例中运用了
1线性渐变：linear-gradient(red 25%，yellow 40%) 从红渐变到黄，并且是红占25%后开始渐变渐变区间为25%到40%之间，剩余为黄色。
2径向渐变： radial-gradient 用法同上
3锐化边角：border-radius：50%（圆）
4运用伪类选择器 before after 使用时必须加上content属性
5浮动：align-items ： top center bottom 浮动元素排列方式
6 2D-transform属性 ：
①：translate（X,Y） 所有方向平移 translatex 水平移动 translateY 竖直方向移动
②：scale（n）缩放（动画，图片）大于1为放大n倍 小于1为缩小n倍 n为负则先图片颠倒再缩放
③：rotate（Ndeg）旋转角度 deg为角度
7transform-origin 设置旋转中心点（top right）右上
8transition（all 2s linear 3s）动画过渡 all为全属性，可设单一属性 2s为过渡时间 linear动画过渡类型 （可用贝塞尔曲线自设） 3s为延迟变化时间
9nth-child（n）孩子选择器
10ul li：not（：nth-child）否定选择器
定位（子绝父相）
11opacity ：（0到1）透明度
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
