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 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
python 读取.nii格式图像实例
2020/07/01 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
python操作toml文件的示例代码
2020/11/27 Python
美的官方商城:Midea
2016/09/14 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
运动会的口号
2014/06/09 职场文书
出生医学证明书
2014/09/15 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
暑假打工感想
2015/08/07 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python