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实现多边框和透明边框的方法
Sep 08 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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中创建并处理图象
2006/10/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
浅析PHP绘图技术
2013/07/03 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
pycharm安装及如何导入numpy
2020/04/03 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
简单的项目建议书模板
2014/03/12 职场文书
办公设备采购方案
2014/03/16 职场文书
学生个人自我鉴定
2014/03/26 职场文书
消防安全责任书
2014/04/14 职场文书
乳制品整治工作方案
2014/05/29 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书