CSS基础及动画

CSS基础及动画

CSS3边框

border-radius

• 用于创建2圆角

box-shadow

• 用来添加阴影

圆角边框 border-radius

border-radius:20px 10px 50px 30px;

• 四个属性值按顺时针排列

使用border-radius制作特殊图形

圆形

• 利用border-radius属性制作圆形的两个要点
  • 元素的宽度和高度必须相同
  • 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

  div{
      width:100px;
      height:100px;
      border:4px solid red;
      border-radius:50%;
  }
  

盒子阴影 box-shadow

div{
    width:100px;
    height:100px;
    border:1px solid red;
    border-radius:8px;
    margin:20px;
    box-shadow:inset 3px 3px 10px #06c;/*内阴影*/
}

CSS渐变

线性渐变——Linear Gradients

• 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
  • 语法

  linear-gradient(position,color1,color2,...) <!-- 渐变方向，第一种颜色，第二种颜色，... -->
  

  • 示例

  #box1{<!-- 从上到下的线性渐变: -->
      background:linear-gradient(red,blue);
  }
  #box2{<!-- 从左到右的线性渐变: -->
      background:linear-gradient(to right,red,blue);
  }
  #box3{<!-- 从左上角到右下角的线性渐变: -->
      background:linear-gradient(to bottom right,red,blue);
  }
  

径向渐变——Radial Gradients

• 圆形或椭圆形渐变、颜色不再沿着一条直线变化、而是从一个起点朝所有放向混合
  • 语法

  radial-gradient(center,shape size,start-color,...,last-color);
  

  #box6{<!-- 颜色结点均匀分布的径向渐变: -->\
      background:radial-gradient(red,green,blue);
  }
  #box7{<!-- 颜色结点不均匀分布的径向渐变: -->\
      background:radial-gradient(red 5%,green 15%,blue 60%);
  }
  #box8{<!-- 形状为圆形的径向渐变: -->\
      width:600px;height:400px;
      background:radial-gradient(circle,red,yellow,green);
  }
  
  

CSS3文本效果

• text-shadow
  • 向文本添加阴影
• text-overflow
  • 当文本溢出包含元素时发生的事情

text-shadow属性

值	说明
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

• 示例

<h1>Text-shadow effect!</h1>
h1{
    text-shadow:5px 5px 5px #FF0000;
}

text-overflow属性（超出部分显示省略号）

• 超出部分显示省略号
  • white-space:nowrap 文本不会换行，在同一行继续
  • overflow:hidden 溢出隐藏
  • text-overflow:ellipsis 用省略号来代表被修剪的文本
• 示例

h2{
    width:150px;line-height:50px;border:1px #ccc solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

CSS3字体

• 语法

  @font-face{
      font-family:必需。规定字体的名称
      src:必需。定义字体文件的URL
      font-weight:可选。定义字体的粗细。默认是"normal"
      font-style:可选。定义字体的样式。默认是"normal"
  }
  

• 示例

@font-face{
        font-family:myfont;
        src:url(fonts/shimesone_personal-webfont.eot);
        src:url(fonts/shimesone_personal-webfont.svg);
        src:url(fonts/shimesone_personal-webfont.ttf);
        src:url(fonts/shimesone_personal-webfont.woff);
        font-weight:normal;
        font-style:normal;
    }

CSS3变形2-1

• CSS3变形是一些效果的集合
  • 如平移、旋转、缩放、倾斜效果
• 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
  • 语法

  transform:[transform-function];
  

CSS3变形2-2

• 变形函数
  • translate():平移函数，基于X,Y坐标重新定义元素的位置
  • scale():缩放函数，可以使任意元素对象尺寸发生变化
  • rotate():旋转函数，取值是一个度数值
  • skew():倾斜函数，取值是一个度数值
• 浏览器支持

属性名	IE	Firefox	Chrome	Opera	Safari
2D transform	9+	3.5+	4.0+	10.5+	3.1+

2D位移

一个方向上的偏移

• translateX (tx)
  • 表示只设置X轴的位移

  transform:translate(100px,0)  <==>  transform:translateX(100px)
  

• translateY (ty)
  • 表示只设置Y轴的位移

  transform:translate(0,100px)  <==>  transform:translateY(100px)
  
  

2D缩放

• 语法

scale(sx,sy);

2D倾斜

• 语法

skew(ax,ay);<!-- 水平方向（x轴）的倾斜角度，垂直方向（Y轴）的倾斜角度 -->

• 可以仅设置沿着X轴或Y轴方向倾斜
  • skewX(ax):表示只设置X轴的倾斜
  • skewY(ay):表示只设置Y轴的倾斜

2D旋转

• 语法

rotate(a);

• 参数a单位使用deg表示
• 参数a取正值时元素相对原来中心顺时针旋转
  

CSS3过渡2-1

• transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
• CSS3 transition的过渡功能更像是一种"黄油"，通过一些CSS的简单动作触发样式平滑过渡

CSS过渡2-2

• 浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
transition	10+	4.0+	4.0+	10.5+	3.1+

• 语法

transition:[transition-property transition-duration transition-timing-function transition-delay]

过渡属性的使用3-1

过渡属性(transition-property)

• 定义转换动画的CSS属性名称
  • property:指定的CSS属性(width、height、background-color属性等)
  • all:指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
• 过渡所需的时间(transition-duration)
  • 定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒(s)

过渡属性的使用3-2

过渡动画函数(transition-timing-function)

- 指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

|值|说明|
|:--|--|
|linear|规定以相同速度开始至结束的过渡效果|
|ease|规定慢速开始，然后变快，然后慢速结束的过渡效果(默认值)|
|ease-in|规定以慢速开始的过渡效果|
|ease-out|规定以慢速结束的过渡效果|
|ease-in-out|规定以慢速开始和结束的过渡效果|

过渡属性的使用3-3

(transition-delay)

• 指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
  • 正值:元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
  • 负值:元素过渡效果会从该时间点开始显示，之前的动作被截断
  • 0:默认值

过渡的触发机制

• 伪类触发
  • :hover :active : focus : checked
• 媒体查询:通过@media属性判断设备的尺寸，方向等
• JavaScript触发:用JavaScript脚本触发

CSS3动画

animation动画简介

• animation实现动画主要由两个部分组成
  • 通过类似Flash动画的关键帧来声明一个动画
  • 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
• 浏览器支持

属性名	IE	Firefox	Chrome	Opera	Safari
animation	10+	5.0+	4.0+	12+	4.0+

CSS3动画的使用过程5-1

• 设置关键帧

  • 语法

  @keyframes animationname{
      from{<!-- CSS样式写在这里 -->}
      percentage{<!-- CSS样式写在这里 -->}
      to{<!-- CSS样式写在这里 -->}
  }
  

  @keyframes spread{
      0%{width:0;}
      33%{width:23px;}
      66%{width:46px;}
      100%{width:69px;}
  }
  

  CSS3动画的使用过程5-2

  • @keyframes的浏览器兼容性

  属性名	IE	Firefox	Chrome	Opera	Safari
  @keyframes	10+	5.0+	4.0+	4.0+	12.0+

  • 写兼容的时候浏览器前缀是放在@keyframes中间
    • 例如: @-webkit-keyframes、 @-moz-keyframes

  CSS3动画的使用过程5-3

  • 调用关键帧
    • 语法
      

  CSS3动画的使用过程5-4

  • 动画的播放次数(animation-iteration-count)
    • 值通常为整数，默认值为1
    • 特殊值infinite,表示动画无限次播放
  • 动画的播放方向(animation-direction)
    • normal,动画每次都是循环向前播放
    • alternate,动画播放数次则向前播放
  • 动画的播放状态(animation-play-state)
    • running将暂停的动画重新播放
    • paused将正在播放的元素动画停下来

  CSS3动画的使用过程5-5

  • 动画发生的操作(animation-fill-mode)

    • forwards表示动画在结束后继续应用最后关键帧的位置

    • backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

    • normal,动画每次都是循环向前播放

    • alternate,动画播放数次则向前播放

  • 动画的播放状态(animation-play-state)
    • running将暂停的动画重新播放
    • paused将正在播放的元素动画停下来

  CSS3动画的使用过程5-5

  • 动画发生的操作(animation-fill-mode)
    • forwards表示动画在结束后继续应用最后关键帧的位置
    • backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
    • both表示元素动画同时具有forwards和backwards的效果