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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php邮件发送的两种方式
2020/04/28 PHP
Yii核心验证器api详解
2016/11/23 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
大四学年自我鉴定
2013/11/13 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
实习心得体会
2014/01/02 职场文书
开学典礼决心书
2014/03/11 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
团代会开幕词
2015/01/28 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
青春雷锋观后感
2015/06/10 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Nginx限流和黑名单配置
2022/05/20 Servers