css3 中的新特性加强记忆详解


Posted in HTML / CSS onApril 16, 2016

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;

CSS Code复制内容到剪贴板
  1. @keyframes bitch{   
  2.     0%{   
  3.         opacity: 0;   
  4.     }   
  5.     50%{   
  6.         opacity: 1;   
  7.     }   
  8.     100%{   
  9.         opacity: 0;   
  10.     }   
  11. }   
  12. #test{   
  13.     width100px;   
  14.     height100px;   
  15.     backgroundred;   
  16.     animation:bitch 2s ease 0s infinite;   
  17. }  

以上这篇css3 中的新特性加强记忆详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/taoshihan/archive/2016/04/15/5396235.html

HTML / CSS 相关文章推荐
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 #HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 #HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 #HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 #HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 #HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 #HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 #HTML / CSS
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python中添加模块导入路径的方法
2021/02/03 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
《鲁班和橹板》教学反思
2014/04/27 职场文书
村安全生产责任书
2014/08/25 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2014年教师节活动总结
2014/08/29 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
论文答谢词
2015/01/20 职场文书
检讨书范文300字
2015/01/28 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技