Python全栈开发学习--HTML--CSS3（下）--Day7

一、CSS3 新增属性

（6）3D

（7）过渡

（8）动画

（9）多列

二、CSS3 新增属性详解

回到目录

2.6 3D属性

2.6.1 transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法

transform: none|transform-functions

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

2.6.2 transform-origin

transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

语法

transform-origin: x-axis y-axis z-axis;

2.6.3 transform--style

transform–style属性指定嵌套元素是怎样在三维空间中呈现。

语法

transform-style: flat|preserve-3d;

回到目录

2.7 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

2.7.1 transition

语法

transition: property duration timing-function delay

/* 将鼠标悬停在一个 div 元素上，逐步改变div的宽度从 100px 到 300px*/
div
{
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

个人理解：

过渡主要是为网页中元素的变化提供可视化的过程，没加过渡效果的时候，将div盒子的长增加将在瞬间完成，加了过渡效果以后，这个增长的过程将会变得缓慢，用户可以直观看到。

回到目录

2.8 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果

2.8.1 @keyframes 规则

在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式。创建动画规则后，可以与其他元素进行捆绑。

@keyframes 规则三要素：

（1）动画规则名称： animation_name 通过该名称进行元素与动画的捆绑。
（2）变化过程与CSS样式。

1）from 、to

from: 初始的CSS样式
to：改变之后的CSS样式

{
    from {background: red;}
    to {background: yellow;}
}

2）%

0%：初始状态CSS样式
100%：完成时CSS样式
中间过渡阶段可以有多个

{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

完整动画规则案例：

myanimation：动画规则名
@keyframes myanimation
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

绑定动画规则

div
{
	animation:myanimation 5s;  
}

2.8.2 animation

使用简写属性把 animation 绑定到一个网页元素

语法

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state;

name指定要绑定到选择器的关键帧的名称
duration动画指定需要多少秒或毫秒完成
timing-function设置动画将如何完成一个周期
delay设置动画在启动前的延迟间隔
iteration-count定义动画的播放次数
direction指定是否应该轮流反向播放动画
fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state指定动画是否正在运行或已暂停

回到目录

2.9 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写

	column-count:3;
	column-gap:40px;
	column-rule-style:dotted;

这两天由于有事情忙，所以学习的内容有点少。