六 .CSS3 转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
2D变换方法:
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
(1)skewX(<angle>);表示只在X轴(水平方向)倾斜。
(2)skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
3D 转换方法:
七.CSS3过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:(1)指定要添加效果的CSS属性;(2)指定效果的持续时间。
八.CSS3动画
要创建 CSS3 动画,你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ }
九.CSS3多列
CSS3 可以将文本内容设计成像报纸一样的多列布局。
CSS3 的多列属性:
column-count(指定了需要分割的列数)
column-gap(指定了列与列间的间隙。)
column-rule-style(指定了列与列间的边框样式)
column-rule-width (指定了两列的边框厚度)
column-rule-color(指定了两列的边框颜色)
column-rule(是 column-rule-* 所有属性的简写,设置了列直接的边框的厚度,样式及颜色)
column-span (column-span: all; 指定元素跨越所有列)
column-width(指定了列的宽度)
十.CSS3用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。
用户界面属性:
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:(1)轮廓不占用空间;(2)轮廓可能是非矩形
原文:https://www.cnblogs.com/lilistyle/p/13665652.html