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

第九章

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; //动画所需时间
}
时间: 2024-12-21 05:29:36

CSS3秘笈复习:第九章&第十章的相关文章

CSS3秘笈:第九章

1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接.正被单击的链接.这些状态的4个对应伪类选择器分别是:link.:visited.:hover.:active. 为了实现最大程度的设计控制,必须对所有不同的访问状态都定义样式,但是必须按照指定顺序: a : link{color : #F60; } a : visited{color : #900; } a : hover{color : #F33; } a : active{color

CSS3秘笈复习:十三章&amp;十四章&amp;十五章&amp;十六章&amp;十七章

第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素.关键字:left.right或both. (2).浮动外围元素:让包含浮动元素的<div>也浮动.选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方. (3).利用overflow : hidden.另一种常见的方法是在外围的样式中添加以下属性:

CSS3秘笈复习:第一章&amp;第二章&amp;第三章

第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@import指令.把这个指令添加到一个HTML的<style>标签中,像这样: <style> @import url(css/styles.css); </style> 要将所有@import行都放在CSS规则之前. 第三章: 1.类选择器命名只允许使用字母数字连字符(-)

CSS3秘笈复习:第十一章

1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向的定位,关键字是top.baseline.middle或bottom. 两者的区别是,vertical-align不会被继承,因此只能直接用到<th>和<td>标签上. 2.控制表格单元之间的空格:CSS提供了border-spacing属性来控制这条间隙.将该属性应用到表格本身,并且

CSS3秘笈复习:第七章

1.边距冲突: 当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算,浏览器会忽略小的那个值而使用大的值. 2.边距折叠: 假设要在警告框里插入一个标题,并且要在它与div的顶部和底部之间各留出一点空间,浴室设置标题的margin为10px.但是设置的边距反而出现在了div的上方,这种现象叫做边距折叠,意味着两个边距变成了一个.解决的方法有两种:(1)在<div>标签周围添加少量的padding:(2)给<div>添加一条border. 水

CSS3秘笈:第二章

1.一个样式由两个元素组成:浏览器对其设置格式的网页元素(选择器,selector)和实际的格式化指令(声明块,declaration block). 2.简单的样式也包含了以下几个元素: (1)Selector(选择器):选择器告诉浏览器网页上的哪个元素以什么样式显示. (2)Declaration Block(声明块):选择器后面的代码包含了所有要应用到选择器的格式化选项.声明块以大括号包围({}). (3)Declaration(声明):在一个声明块的左右大括号之间,添加一个或多个声明,或

CSS3秘笈:第一章

1.<div>和<span>标签: <div>和<span>标签:就像是一个空的容器,我们要往里面填充内容.一个div就是一个块,意味着它的前后都要空一行:而span则呈嵌套模式,成为一个段落的一部分.<div>标签标示任何不连续的内容块,像一个段落或者标题.<span>标签用于行内元素,出现在一个更大的段落或标题中的文字或者短语.布局如: <div id=”footer”> <p>Copyright 2006

《数据结构与算法分析:C语言描述》复习——第九章“图论”——无权值的最短路径问题

2014.07.04 18:24 简介: 给定一个有向图,你可以认为每条边长度都是1(所以叫无权值).下面的算法可以求出从特定的起点到终点的最短路径长度. 描述: 从起点出发,根据当前顶点出发的边进行广度优先搜索,直至找到终点即可.如果搜索结束了仍然没有找到终点,那么起点无法到达终点. 实现: 1 // A simple illustration for unweighted shortest path. Graph represented by adjacency matrix. 2 #inc

CSS3秘笈第三版涵盖HTML5学习笔记13~17章

第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不用 用浮动进行布局 LayoutGala网站(http://blog.html.it/layoutgala/)上提供了40种不同的CSS设计,但大多只是基本框架,里面只有<div>标签及其定位用的CSS代码 布局生成器,Cridinator(http://gridinator.com)提供了简单的