CSS3.0入门笔记(二)
2016-05-08 20:11
603 查看
1.transition:运动时间 属性 运动类型 延迟时间
transition:10s all ease 2s;
transition:1s width linear,2s height ease-in,1s background ease;
2.
旋转 transform:rotate(角度deg);
旋转中心transform-origin:(xpx,ypx)/(%,%)/
缩放 transfrom:scale(x倍数,y倍数);【反转(-1,-1)】
变形倾斜 transfrom:skew(xdeg,ydeg);
平移 transfrom:translate(xpx,ypx);/(%,%)
线型渐变:background:-webkit-linear-gradient(方向,颜色1 距离,颜色2 距离,颜色2 距离…);
线型渐变_重复:background:-webkit-repeating-linear-gradient(方向,颜色)
方向:top(默认值) left/right/bottom
角度:deg(角度)
径向渐变:background:-webkit-radial-gradient(方向,形状,颜色);
径向渐变_重复:background:-webkit-repeating-radial-gradient(circle,red 0,red 10px,green 10px,green 20px);
方向:center(默认值) left/top/right/bottom 像素值 xpx ypx,
形状: 椭圆(默认) ellipse 正圆circle
蒙版:-webkit-mask:url(a.png) no-repeat;只显示有颜色部分(png)
背景蒙版:-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
文字蒙版:background: -webkit-linear-gradient(red,green,blue,pink);
-webkit-background-clip:text;
color: rgba(0,0,0,0);
transition:10s all ease 2s;
transition:1s width linear,2s height ease-in,1s background ease;
2.
旋转 transform:rotate(角度deg);
旋转中心transform-origin:(xpx,ypx)/(%,%)/
缩放 transfrom:scale(x倍数,y倍数);【反转(-1,-1)】
变形倾斜 transfrom:skew(xdeg,ydeg);
平移 transfrom:translate(xpx,ypx);/(%,%)
线型渐变:background:-webkit-linear-gradient(方向,颜色1 距离,颜色2 距离,颜色2 距离…);
线型渐变_重复:background:-webkit-repeating-linear-gradient(方向,颜色)
方向:top(默认值) left/right/bottom
角度:deg(角度)
径向渐变:background:-webkit-radial-gradient(方向,形状,颜色);
径向渐变_重复:background:-webkit-repeating-radial-gradient(circle,red 0,red 10px,green 10px,green 20px);
方向:center(默认值) left/top/right/bottom 像素值 xpx ypx,
形状: 椭圆(默认) ellipse 正圆circle
蒙版:-webkit-mask:url(a.png) no-repeat;只显示有颜色部分(png)
背景蒙版:-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
文字蒙版:background: -webkit-linear-gradient(red,green,blue,pink);
-webkit-background-clip:text;
color: rgba(0,0,0,0);
相关文章推荐
- css样式使用示例
- CSS清除浮动:清除float浮动
- CSS3的calc()使用
- CSS选择器
- Toobar样式
- css3使用box-sizing布局
- CSS代码中-webkit,-moz,-o,-ms含义
- [Data Structure] LCSs——最长公共子序列和最长公共子串
- CSS控制背景
- 2016-5
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
- Font Awesome 自定义 CSS
- css样式属性
- css3动画-animation属性
- 文本选择问题: css & js
- css3过渡效果
- 自定义ProgressBar颜色样式
- css-position属性
- CSS知识点积累总结
- css3 翻转和旋转的区别