CSS3秘笈复习：第九章&第十章

Posted 2020-07-05

第九章

1.和链接有关的伪类：

（1）:link，未访问过的链接

（2）:visited，已访问过的链接

（3）:hover，鼠标悬停链接

（4）:active，单击链接时

这四种方式一定要严格按上面的顺序执行否则就会无效。

第十章

1.transform属性：

　　要旋转一个元素，首先要提供关键字rotate，后面是要旋转的角度，例如：

transform : rotate(10deg);  //顺时针旋转10度

　　另一个关键字是scale(缩放)，让它变得更大或更小，例如：

transform : scale(2)  //使元素放大两倍 ，0-1之间的数字表示缩小，大于1的数字表示放大

　　（1）分别对水平方向和垂直方向的缩放：

transform : scale(.5 , 2);  //第一个表示水平方向的缩小，第二个表示垂直方向的放大

　　（2）分别对X轴或者Y轴缩放：

transform : scaleX(3.5);
transform : scaleY(3.5);

2.translate函数：

　　transform属性的translate函数只是将一个元素从它现有的位置向左或右以及向上或下移动一定的距离。translate有两个值：第一个值指定水平距离，第二个值指定垂直距离。

　　（1）translateX只是将元素向左或者向右移动：

transform : translateX(-0.5em);

　　（2）translateY是将元素向上或者向下移动：

transform : translateY(-0.5em);

3.transition属性：

　　skew：将元素沿着X轴或Y轴倾斜，例如：

transform : skew(0deg , 45deg); //第一个值是一个0deg~360deg之间的度数值，从元素上方沿着逆时针方向进行；第二个值也是一个0deg~360deg之间的度数值，沿着顺时针方向从元素的右侧进行。

　　skew函数也有X轴和Y轴函数：skewX和skewY。　　

CSS transition的核心是用4个属性控制要以动画展示哪些属性、动画过程要多久、使用什么类型的动画，以及动画开始之前要不要延迟。例如：让一个导航按钮的背景色，在访问者的鼠标经过它时，由橙色变成蓝色:

.navButton{
     background-color : orange ;
     transition-property : background-color ;
     transition-duration : 1s ;
}
.navButton : hover{
     background-color : blue ;
}

第一个属性transition-property定义了要以动画形式展示哪些属性。多个属性以逗号隔开。第二个属性transition-duration指定动画持续时间。

还可以通过transition-ptiming-function控制动画的速度。值可以是以下关键字之一：linear、ease、ease-in、ease-out以及ease-in-out。

延迟启动transition属性：transition-delay。

4.animation：

transition只能从一组属性转变到另一组属性，而animation可以从一组属性转变到另一组属性，再转变到另一组属性等。

创建动画的步骤：

(1)定义关键帧：

基本结构：

@keyframes animationName{
from{
    /*list CSS properties here*/
}
to{
    /*list CSS properties here*/

}
}

它以@keyframes开头，接着是一个名称，这个名称就是你要运用到元素上的动画名字。然后添加起始关键帧（from）和结束关键帧（to）。并非仅限两个关键帧，还可以用百分比定义多个关键帧。例如：想要创建一种让元素的背景色从黄色变成蓝色再变成红色的效果，可以这样写：

@keyframes backgroundGlow{
from{
    background-color:yellow;

}
50%{
    background-color:blue;
}
to{
   background-color:red;
}

}

(2)将动画引用给元素

html代码：

<div class=“announcement”></div>

css代码：

.announcement{
animation-name:fadeIn; //第一步中定义的动画名称
animation-duration:0.5s; //动画所需时间
}