CSS学习笔记(六)--CSS3
来源:互联网 发布:万博软件 周末 编辑:程序博客网 时间:2024/05/22 20:29
CSS3 2D 转换
使用 2D 或 3D 转换来转换您的元素Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。
1.2D 转换
(1)translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数.
translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素
(2) rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转.
值 rotate(30deg) 把元素顺时针旋转 30 度
(3)scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数.
scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
(4)skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
(5)matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
CSS3 3D 转换
nternet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
(1) rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
(2) rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本,不支持 transition 属性。Chrome 25 以及更早的版本,需要前缀 -webkit-。
要实现这一点,必须规定两项内容:
[1]规定您希望把效果添加到哪个 CSS 属性上
[2]规定效果的时长
div{ width:100px; height:100px; background:yellow; transition:width 2s;}div:hover{ width:300px;}//CSS 属性改变的典型时间是鼠标指针位于元素上时,宽度属性的过渡效果,时长为 2 秒.//当指针移出元素时,它会逐渐变回原来的样式。
CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
eg:
@keyframes myfirst{ from {background: red;} to {background: yellow;}}
@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
[1]规定动画的名称
[2]规定动画的时长
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
@keyframes myfirst{ 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}}0-25 25-50 50-75 75-100
CSS3 多列
Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本不支持多列属性。
[1]column-count 属性规定元素应该被分隔的列数。
[2]column-gap 属性规定列之间的间隔。
[3]column-rule 属性设置列之间的宽度、样式和颜色规则。
CSS3 用户界面
Firefox、Chrome 以及 Safari 支持 resize 属性。Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
[1]resize 属性规定是否可由用户调整元素尺寸。
[2]box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
[3]outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:1.轮廓不占用空间.2.轮廓可能是非矩形
- CSS学习笔记(六)--CSS3
- Css3学习笔记(六):动画
- CSS学习笔记---(六)
- CSS学习笔记(五)--CSS3
- Flex学习笔记(六) CSS
- CSS3属性笔记(六)
- CSS学习笔记(六)CSS 属性选择器
- css样式学习笔记六
- HTML+CSS学习笔记 (六)
- CSS学习笔记-浮动(六)
- CSS学习笔记(二)--CSS3的学习
- CSS3学习笔记(二)之CSS转换
- CSS学习笔记(六) 元素定位
- 《HTML+CSS基础课程》学习笔记六
- css3学习笔记(六)----Media Queries(媒体样式) 与Responsive(响应式)
- 学习笔记(六)
- 学习笔记(六)
- CSS3学习笔记(一)
- WordPress 十分钟搭建个人博客(WAMP +WordPress)
- ajax详解
- 聊一聊this和super关键字
- 1056. Mice and Rice (25)
- centos7中安装nginx
- CSS学习笔记(六)--CSS3
- 第五周:[leetcode] Two Sum、3Sum、3Sum Closest、4Sum
- nginx学习笔记2 nginx信号控制和平滑升级
- 卷皮2017春招笔试题
- android 报错Attempt to invoke virtual method
- C++四种强制类型转换
- No suitable driver found for jdbc:mysql://localhost:3306/shop_01
- 002--mysql索引
- 【恒大家装】成功案例