学习笔记-CSS3
学习笔记-CSS3

学习笔记-CSS3

1.CSS3介绍

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。——百度百科

CSS3在CSS的基础上可以进行简单的动画以及过渡,文字阴影的处理。


2.CSS3学习

2.1.圆角边框与阴影:

浏览器支持度:添加内核解决
border-radius属性:圆角边框,border-top-left-radius左上角,border-top-
                   right-radius右上角
                   border-bottom-left-radius左下角,border-bottom-
                   right-radius右下角
                   + 水平值 + 垂直值
                   border-radius:25px,四个角水平垂直值都为25px
                                 当height为50px时,两边为半圆
box-shabow属性:inset 水平偏移 垂直偏移 模糊距离 颜色
                inset 可选,内部阴影
                outset 默认值,外部阴影

2.文字与文本:

text-shadow属性:设置文本阴影,水平偏移 垂直偏移 阴影大小 颜色
word-wrap属性:允许长单词、URL地址强制进行转换
              break-word:将单词折叠换行显示在边框内
              normal:默认属性
@font-face规则:C盘fonts文件夹里有很多字体对应的文件,可以使用对应字体
              对于特殊Web字体,放在服务器上,需要时下载
              利用@font-face规则,定义web字体,并引用需要字体的四种文件
              格式,确保在主流浏览器中都能正常显示该字体
                  .WOFF       Chrome, Firefox
              <style>
                  @font-face{
                      font-family:kastlerFont              定义字体名称
                      src:url('fonts/kastler.ttf'),
                          url('fonts/kastler.eot'),        定义字体来源
                          url('fonts/kastler.woff'),
                          url('fonts/kastler.svg');
                  }
                  p {
                      font-family:kastlerFont;            引用字体
                  }

3.2D转换:

方法:对元素进行旋转、缩放、移动、拉伸
  transform:rotate( deg):旋转,deg为degree角度,正值为顺时针旋转,负值为
                          逆时针
  #rotateDiv{
          transform:rotate(30deg);
      }
  transform:scale(x,y):缩放,x:水平方向缩放的倍数,y:垂直方向缩放的倍
                        数,若省略,同x;0~1,缩小;>1放大
  配合hover实现动态效果
  .box:hover{
          transform:scale(1.2);
  }
4.过渡与动画:
过渡transition属性:将元素的某个属性从“一个值”在指定的时间内过渡到”另
                   一个值“
  transition:属性名 持续时间 过渡方法
  transition-property:属性名|all 对哪个属性进行变化
  transition-duration:持续时间
  transition-timing-function:过渡使用的方法(函数)
      linear匀速    ease慢快慢     ease-in慢快   ease-out快慢  ease-in-
      out慢快慢
  transition-delay:延迟
  div {
      color:#000;
      background-color:silver;
      transition:all 1s linear;
  }
  div:hover {
      color:white;
      background-color:#45B823;
  }
动画@keyframes规则animation属性:让一个元素通过animation属性完成若干种状
                                态之间的一个转换,
  (1)定义动画:@keyframes规则,
  (2)调用动画:animation:名字 时长 播放方式
             animation-name:引用@keyframes动画的名称
             animation-duration:动画完成时间
             animation-timing-function:规定动画的速度曲线。默认时
                                       “ease”
             animation-play-state:running | pause  播放状态
      CSS:
      @keyframes mycolor{
          0%  {background-color:red;}
          30% {background-color:blue;}
          60% {background-color:yellow;}
          100%{background-color:green;}
      }
      HTML:
      div:hover{
          animation:mycolor 5s linear;
      }

5.3D变换:

3D:transform-style:preserve-3d
旋转:transform属性totateX() rotateY() rotateZ() 角度deg
透视:perspective属性,近大远小
坐标系:正视方向为平面,向右为x轴,向上为y周,垂直平面向观察者为z轴
例子:结构相对固定
    父容器:旋转
          transform-style:preserve-3d;
          transform:rotateY(60deg);
    舞台:透视关系,最外层盒子
        presoective:100px;   眼睛到舞台的距离,值越大,透视效果越不明显
    <div id="stage">
          <div class="box x">
              <img src="frog.jpg">
          </div>
          <div class="box y">
              <img src="frog.jpg">
          </div>
          <div class="box z">
               <img src="frog.jpg">
          </div>
    </div>
    #stage {
      width:300px;
      margin:100px auto;
      perspective:100px;
    }
    .box {
      width:100px;
      height:100px;
      float:left;
      transition:linear 1s;
      transform-style:preserve-3d;
    }
    img {
      width:100px;
      height:75px;
    }
    .x:hover{
      transform:rotateX(60deg);
    }
    .y:hover{
      transform:rotateY(60deg);
    }
    .z:hover{
      transform:rotateZ(60deg);
    }