CSS3.0入门笔记(二)
来源:互联网 发布:施工网络进度计划 编辑:程序博客网 时间:2024/05/24 05:28
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);
0 0
- CSS3.0入门笔记(二)
- CSS3属性笔记(二)
- css3学习笔记(二)
- css3入门笔记
- 《CSS3实战》笔记--渐变设计(二)
- HTML5与CSS3学习笔记(二)
- 《CSS3实战》笔记--选择器(二)
- css3入门笔记(更新完成)
- OpenGL入门笔记(二)
- TFS-入门笔记(二)
- Python入门笔记(二)
- Linux 入门笔记(二)
- Spring入门笔记(二)
- python 入门笔记(二)
- SpringMVC入门笔记(二)
- OpenStack入门笔记(二)
- OpenCV入门笔记(二)
- Css3学习笔记(二):在页面中插入内容
- 机房重构之DataTable转泛型
- 一个简单的实现不同权限的用户登录后看到不同的菜单设计的数据库表清单
- 深度学习之-caffe预测、特征可视化python接口调用 (6)
- Android使用TabLayout实现选项卡
- Maven项目中不打包 *.hbm.xml 映射文件
- CSS3.0入门笔记(二)
- Hibernate入门(四)之hibernate中session的创建方式
- 在Node.js中实现任务调度与执行
- 大话设计模式-桥接模式
- synchronized的使用方法(2)
- JDK安装与环境变量配置
- poj 3278 bfs
- ArcEngine定义查询
- bzoj3667: Rabin-Miller算法