[css] css3 中的新特性加强记忆
css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面
2D转换
使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webkit- -moz-
使用rotate()方法,让元素旋转一定的角度,参数:角度
例如:transform:rotate(30deg); deg是角度的单位
使用translate()方法,让元素位移,参数:x轴 ,y轴
例如:transform:translate(10px,10px);
使用scale()方法,改变元素的比例大小,参数:x轴比例,y轴比例
例如:transform:scale(2,2);
使用skew()方法,拉伸元素,参数:x轴角度,y轴角度
例如:transform:skew(20deg,20deg);
使用matrix()方法,多变换结合,参数:矩阵,我看不懂
3D转换
使用rotateX()和rotateY()方法,对元素进行旋转,浏览器很多都不支持,参数:角度
过渡效果
使用transition:属性为元素设置过渡动画效果,兼容浏览器加前缀 –webkit- -moz-,必须是样式在被修改的时候才会生效,因此在:hover的时候修改元素的样式,可以看到效果
使用transition:属性,参数:css样式 持续时间
例如:transition:width 2s;
参数中使用逗号分隔多项改变,transition:样式 时间,样式2 时间2,。。。
动画
创建动画@keyframes规则,@keyframes 规则名称{}
内容里面,使用百分比来划分动画的进度,变化样式
0%{ 一些样式 }
25%{ 一些样式 }
50%{ 一些样式 }
75%{ 一些样式 }
100%{ 一些样式 }
使用animation:属性设置动画规则,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,循环播放
例如: animation:bitch 2s ease 0s infinite;
@keyframes bitch{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } #test{ width: 100px; height: 100px; background: red; animation:bitch 2s ease 0s infinite; }
相关文章
- Docker创建Redis容器模板命令
- SpringBoot+SpringData-Redis 操作 Redis(CRUD) 模板代码
- Docker高级篇:实战Redis集群!从3主3从变为4主4从
- CentOS7-命令-重启网卡命令(systemctl restart network)
- CSS Flex 弹性布局使用
- 【stars-one】JetBrains产品试用重置工具
- JB一键重置
- 修改阿里云DNS 解决蓝奏云无法访问问题
- IDEA无限试用插件
- 油猴脚本——快速引用某篇文章的标题和地址
- lzupdate
- 封装TornadoFx常用控件库
- 蓝奏云正则字符串
- stars-one的原创工具——文档生成器
- Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标
- rpc框架dubbo学习入门及环境搭建(spring boot+Kotlin)
- Tornadofx学习笔记(3)——使用Maven编译成jar包
- 探究Spring Boot中的接收参数问题与客户端发送请求传递数据
- 提问须知
- Spring boot返回时间与MySql数据库中不相同问题及解决方法