CSS语法（下）

<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>注释：</b>我们使用在测试链接中使用了 href="#"。在真实的网站中，应该是真实的 URL。</p>

</body>
</html>

向其中加入链接则可成为一个简略的导航，下面，去除序列产生的黑点。
list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
完整的导航模板：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

CSS文本效果

主要讲俩个：

text-shadow 文本阴影
word-wrap 自动换行
text-shadow：您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。如：h1{text-shadow：5px 5px 5px #FF0000;}
自动换行：当单词的长度长于所规定的行，强制换行。p{word-wrap:break-word;}

文本属性

CSS字体

@font-face协议
在css3之前，web设计师只能使用计算机事先安装好的字体，css3在字体方面预示着可以花里胡哨，您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
是用自己的字体：首先必须定义字体为特定的名称，然后指向其字体文件。

<style> 
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
    ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

引入网页代码结构，即可引用目标字体。
css字体描述

CSS3转换

改变元素形状，大小尺寸，位置的一种方法。

浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
~~注释：Internet Explorer 9 需要前缀 -ms-。~~
2D转换
2D转换有以下方法：
1.translate（）可以将指定元素从当前位置向left（x）,向top（y）移动单位为像素（px）
2.rotate（）将元素顺时针转动制定角度单位为角度（deg）
3.skew（）将元素按照指定的x,y轴进行一定角度的翻转单位（deg）
4.scal（）将元素在原先设置长宽的前提下进行一定比例的放大缩小。（a,b）a为宽扩大倍数，b为高度扩大倍数。
5.matrix（）6个值可实现缩放，平移，旋转。
3D转换
您将学到其中的一些 3D 转换方法：
1.rotateX():元素围绕其 X 轴以给定的度数进行旋转。
2.rotateY()元素围绕其 Y 轴以给定的度数进行旋转。
3.perspective 属性设置元素被查看位置的视图：后跟值可确定元素距离视图的距离。

CSS3过渡动画

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果,实现简单的动画设计。
工作原理：
1.将效果添加到哪个属性
2.设置效果时长（如果没有效果时长，则不会显示效果）
transition 过渡
IE10、Firefox、Chrome、Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Chrome 25 以及更早版本需要前缀 -webkit-。
IE9 以及更早版本不支持 transition 属性。
transition是一个复合属性，包括transition-property 时间属性（默认为all）、transition-duration 持续时间（默认为0s）、transition-timing-function 时间函数（默认为ease）、transition-delay 延迟时间（默认为0s）这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .test {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition-duration: 3s;
      /*    以下三值为默认值，稍后会详细介绍 */
      transition-property: all;
      transition-timing-function: ease;
      transition-delay: 0s;
    }

    .test:hover {
      width: 500px;
    }
  </style>
</head>

<body>
  <div class="test"></div>
</body>

</html>

在浏览器上打开，则可以看到动相应动画。
1. 复合属性
过渡transition的这四个子属性只有< transition-duration>是必需值且不能为0。< transition-duration>和< transition-delay>都是时间。当两个时间同时出现时，第一个是< transition-duration>，第二个是< transition-delay>；当只有一个时间时，它是< transition-duration>，而< transition-delay>为默认值0。transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。
~~过渡时间函数~~
取值：贝塞尔曲线函数，自属性，steps函数，默认值为ease。

steps步进函数
过渡时间划分成大小相等的时间时隔来运行。
贝塞尔bezier时间曲线
有四个点p0~p3坐标来控制。其中，p0(0,0)和p3（1,1）确定，通过改变p1,p2的值来改变bezier值得范围为【0,1】。
关键字
关键字说白了就是steps和bezier函数的取值。

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

2.多值

若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可。
当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值。

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，多余的属性值将无效。

#test1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms;
}

这里，500ms,ease,0s因为没有对应的属性继承，系统自动判作无效。

transition-property中含有多余值，没有其他来修饰，自动视为无效值。
当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值，但依然按顺序对应transition的其他属性值。

#test1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 500ms ease 0s,background 2s linear 200ms;
}

注：~~这里的width看的是第二个width。~~
3.过渡阶段

过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。
过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值。
子态与父态过渡：当子元素和父元素过渡属性一致，若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值；同理，若子元素过渡并未完成就开始父元素的过渡，则将子元素过渡的中间态的值作为父元素过渡的初始值。要注意：设置的过渡时间不同时，但运行的时候，两者同时开始计时。如：子元素过度时间为4s,fu元素过渡时间为3s,鼠标在子元素上悬浮2s,移向父元素，此时，父元素的起始态为2s。
task:导入一个动画

4.触发方式
触发方式就transition来说有三种，其中常用的是伪类触发和js触发。（JavaScript目前没有入手，之后会做相应的补充）伪类触发包括:hover、focus、active。

hover
鼠标悬停触发：
focus
鼠标点击触发：
active
鼠标点击并按住不动触发：

CSS动画

其实过渡transition也是动画的一种，接下来主要记录的是animation，animation是transition属性的拓展，还可以这样理解：多个transition组成animation能够做出更复杂的东西。使用 animation 的前提是我们需要先使用 @keyframes 来定义一个动画效果，@keyframes 定义的规则可以用来控制动画过程中的各个状态的情况，语法大抵是这个样子：
@keyframes W
from { }
to { }
@keyframes后跟的是动画的名字，然后是一个块，块中是各种选择器进行制作。
1.animation属性

animation-name 你需要的动画效果的 @keyframes 的名字。
animation-delay 和 transition-delay 一样，动画延迟的时间。
animtaion-duration 和 transition-duration 一样，动画持续的时间。
animation-direction 动画的一个方向控制。默认从左到右，reverse为从右向左

Old urchin

发布了13 篇原创文章 · 获赞 2 · 访问量 429

私信关注

导航

CSS文本效果

CSS字体

CSS3转换

CSS3过渡动画

CSS动画

猜你喜欢