CSS3秘笈第三版涵盖HTML5学习笔记9~12章_html/css

집

웹 프론트엔드

HTML 튜토리얼

CSS3秘笈第三版涵盖HTML5学习笔记9~12章_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

第9章，装饰网站导航

限制访问，处于隐私方面考虑，浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了。其中包括对已访问过的链接定义color、background-color、border-color等样式（除非已经为那些链接的正常状态定义了颜、背景色和边框色）

对于标签可以对所有不同的访问状态设置样式，但要让样式有效，必须以特定的顺序指定链接：link、visited、hover、active

CSS3按钮生成器： http://css3button.net

CSS3按钮优秀示例： http://hellohappy.org/css3-buttons/和 http://webdesignerwall.com/tutorials/css3-gradient-buttons

垂直导航栏

1、把链接当成块显示

2、限制按钮宽度

水平导航栏

方法1、使用display:inline-block属性，但是会在按钮之间留下一条小缝隙。

消除空格方法1：把上一个与下一个

放同一行，不过，代码都不这样写

<ul>   <li><a href="#">one</a></li><li>   <a href="#">two</a></li><li>   <a href="#">three</a></li></ul>

效果：

消除空格方法2：对项目列表添加负值的right margin，不过不同的文本长度，会使这个值不同，需要去实验

    <style type="text/css">        li {            display: inline-block;            border: 1px solid #999;            margin-right: -9px;        }    </style>

效果：

对水平导航栏使用浮动

1、浮动列表项目

2、为链接添加display:block

3、给链接定义样式

4、添加一个宽度

5、在

关于创建导航栏方面的帮助

将普通列表变成非凡导航元素： http://css.maxdesign.com.au/listutorial/

基于列表的导航设计教程： http://css.maxdesign.com.au/listamatic/

不想费力自己创建可以试试List-O-Matic向导： www.accessify.com/tools-and-wizards/developer-tools/list-o-matic

CSS式的预载替换法

使用CSS可以很简单的给图形链接在鼠标经过时变成另一张图片，不过有个问题，除非已下载了图片，否则浏览器在接收和显示新图片时会有一个很明显的延迟，为避免延迟，可以采用CSS精灵（CSS Sprites），可以用一张图片创建不同的按钮状态

1、使用图片编辑软件创建带有不同按钮版本的图片

2、测量从整张图片顶部到每张图片顶部之间的距离

3、给普通的链接创建一个CSS样式

4、创建:hover样式

给特殊的链接类型定义样式

使用属性选择器

a[href^='http://']

第10章，CSS的transform、transition和animation属性

transform（变形）

CSS3引入了几个可以对网页元素进行变换的属性，比如对它进行旋转、缩放、移动，或者沿着它的水平方向或垂直方向扭曲（斜切变换）

IE9，Safari，Chrome，Firefox，Opera支持2D变换，IE8及更早不支持，transform需要使用供应商前缀

transform功能：

1、rotate（旋转）

.testClass{    transform:rotate(20deg);          /* 提供一个0~360的度数值，正值顺时针方向旋转，负值逆时针 */}

2、scale（缩放）

.testClass{    transform:scale(2);                    /* 接受单个参数：放大或缩小，0~1之间的数是缩小，大于1的数是放大，负数会将元素倒过来缩放 */    transform:scale(x,y);                  /* 接受两个参数：第一个表示水平缩放，第二个表示垂直缩放 *//*单方向缩放：*/    transform:scaleX(num);/*沿X轴缩放*/    transform:scaleY(num);/*沿Y轴缩放*/}

3、translate（平移）

transform的translate函数只是将一个元素从它现有位置向左或向右以及向上或向下移动一定距离

translate函数有两个值：第一个指定水平距离（正数向右移，负数向左），第二个指定垂直距离（正数向下，负数向上）

还可以单方向使用：translateX水平方向，translateY垂直方向

都可以使用pixel，em以及percentage值

4、skew（倾斜）

.testClass{    transform:skew(45deg,0);          /* 第一个指沿X轴倾斜（正数向左倾斜<从元素上方沿逆时针进行>，负数向右），*/                 /*第二个指沿Y轴倾斜（正数往右边向下<沿顺时针从元素右侧进行>，负数往左边向下），这个理解不够，表达不明白 */}

多个函数共用：

.testClass{    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);}

这些函数的应用顺序就是浏览器应用这些效果的顺序

5、origin

一般来说，都是相对于元素的中心作变换点，但CSS3允许使用transform-origin属性，改变这个点，与background-position属性一样，可以提供关键字、pixel为单位的绝对值、em和percentage为单位的相对值

transform-origin:left top;

transform-origin:0 0;

transform-origin:0% 0%;

transform-origin:right bottom ==> transform-origin:100% 100%

第一个指水平，第二个指垂直

3D变形，CSS3还提供了一种更加复杂的变换类型：3D变形（3D transform）

transition

实际上是在一定时间内，一组CSS属性变换到另一组属性的动画展示过程。

为了使transition生效，需要做以下几件事：
1、两个样式，一个开始，一个结束

2、transition属性。CSS3新增，使动画成为可能的秘诀所在。一般应用到最初开始的样式中

3、触发器

浏览器无法以动画形式模拟所有CSS属性，但还是有很多可选择。具体请看： www.w3.org/TR/css3-transitions/#animatable-properties

添加transition

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

transition-property用于定义要以动画显示哪些属性，可以指定一个或多个，也可以使用all关键字。

transition-duration用于定义动画要持续多久结束，可以使用秒或毫秒作单位transition-duration:.5s，transition-duration:500ms

还可以针对每个需要动画展示的属性分别定义时限：

.testClass{    transition-property:color,background-color,border-color;    transition-duration:.5s,.75s,2s;}

时间与属性是一一对应的

注：必须提供供应商前缀，并不需要提供IE供应商前缀，IE9及之前不支持，IE10可支持前缀版本

给transition定时

transition-timing-function属性可控制动画速度。并不是控制动画时间长短，而是控制动画期间的速度。可以使用关键字：linear、ease、ease-in、ease-out、ease-in-out，浏览器默认以ease方法。

还可以使用cubic-bezier值。Bezier曲线。

.testClass{     transition-timing-function:cubic-bezier(.20,.96,.74,.07);}

可以使用在线工具创建和测试不同的定时函数，Mathew Lein的Ceasar工具就是其中之一： http://matthewlein.com/ceaser/

延时启动transition

利用transition-delay属性阻止立即开始动画。

需要使用供应商前缀：

.testClass{    -webkit-transition-delay: .5s;    -moz-transition-delay: .5s;    -o-transition-delay: .5s;    -ms-transition-delay: .5s;    transition-delay: .5s;}

在使用CSS下拉菜单时，如果不小心让鼠标离开了菜单，则下拉菜单很快就消失了，可以使用如下做法：
在初始样式添加：transition-delay: 5s;

在:hover样式添加：transition-delay: 0;

这么做不合常理就是了

注：js改动CSS属性，也会启动transition

transition快捷方法

使用transition属性。只需要列出属性、延时时间、定时函数，并用空格分开即可。

.testClass{    transition:all 1s ease-in .4s;}

还可以分开定义多个，只需要逗号分隔：

.testClass{    transition:color 1s,background-color .5s 1s;}

需要提供供应商前缀

animation

创建动画

1、定义动画，包括创建关键帧，即列出要创建动画的CSS属性

2、将动画应用到元素上，可以应用给任意数量的元素

定义关键帧

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

@keyframes并不是CSS属性，应该称之为at规则，CSS其他at规则还包括@import，@media

还可以使用多个百分比定义多个关键帧：

@keyframes backgroundGlow{    from{        backgorund-color:yellow;    }    50%{        background-color:blue;    }    to{        background-color:red;    }}

以上表示，蓝色背景会在动画进行到50%时出现，可以用0%代替from关键字，100%代替to关键字

还可以这么设置：

@keyframes glow{    from{        backgorund-color:yellow;    }    25%,75%{        background-color:blue;    }    to{        background-color:red;    }}

表示在动画进行25%-75%之间要显示持续显示蓝色背景

还有这个：

@keyframes glow{    from{        backgorund-color:yellow;    }    20%,60%{        background-color:blue;    }    40%,80%{        background-color:orange;    }    to{        background-color:red;    }}

表示在20%显示blue，在40%显示orange，在60%显示blue，在80%显示orange，跳来跳去

CSS3 animation一大缺点：需要特定的供应商前缀：

@-webkit-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-moz-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-o-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}

注：不需要为IE提供，IE9及更早版本不支持，IE10支持无供应商前缀版本

应用animation

可以给元素的任何样式添加动画，也可以给伪类应用动画，js改动也会启动动画

1、用@keyframes规则创建淡入动画：

@keyframes fadeIn{    from{    opacity: 0;    }    to{    opacity: 1;    }}

2、将动画应用给

标签的样式：

.announcement{    animation-name: fadeIn;          /*设置动画名称，前面创建的*/    animation-duration: 1s;          /* 设置动画从开始到结束所花时间 */}

可以将非动画属性也一起放入样式中

animation-name，animation-duration也需要使用供应商前缀

给animation定时

使用animation-duration定时，可以像transition一样定义多个，只要用逗号分开，一一对应。

使用animation-timing-function函数控制整个动画或特定关键帧，可以使用Cubic Bezier曲线也可以使用关键字，关键字与transition-timing-function函数关键字一样（linear、ease、ease-in、ease-out、ease-in-out）

定义了多个关键帧，还可以在关键帧之间应用不同的函数：

@keyframes growAndGlow{    from{        background-color: yellow;        animation-timing-function: cubic-bezier(1, .3, 1, .115);    }    50%{        transform:scale(1.5);        background-color:blue;        animation-timing-function: linear;    }    to{        transform:scale(3);        background-color: red;    }}

还可以使用延时启动：animation-delay可以设置等待时间，与transition-delay属性一样。

完成animation

使用animation-iteration-count可以设置动画运行的次数。使用infinite可以不限次数的运行下去

为了使一个动画在奇数次时超前运行，在偶数次时反向运行，可以使用animation-direction属性和关键字alternate。

为了让一个动画在运行后回归最初的状态，可以使用偶数迭代次数，并将animation-direction设为alternate

可以使用animation-fill-mode:forwards;将动画固定在最后的样子，以免使得web浏览器在动画结束时，将元素突兀的变回初始状态

使用animation快捷方式

.fade{    animation-name: fadeOut;    animation-duration: 2s;    animation-timing-function: ease-in-out;    animation-iteration-count: 2;    animation-direction: alternate;    animation-delay: 5s;    animation-fill-mode: forwards;}

改写：

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;}

只有名称和持续时间是必要的，其他都是可选，应用多个动画，只需每个动画用逗号隔开即可。

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}

实际应用还需给定供应商前缀：

.fade{    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                        glow 5s;    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                     glow 5s;    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                   glow 5s;    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}