html第六天

css3样式

兼容前缀:

正常样式: teansform

前缀写法:
-o-teansform       //opear
-ms-teansform      //IE
-moz-teansform     //firefox
-webkit-teansform  //chrome

正规的写法:
teansform
-o-teansform       
-ms-teansform     
-moz-teansform    
-webkit-teansform  

1.透明度
透明度: rgba(111,111,111,0.7)    取值:0--1之间     0完全透明    1完全不透明
不透明度: opacity:0.7;           取值:0--1之间     0完全透明    1完全不透明

2.
text-overflow  规定当文本溢出包含它的盒子,应该如何显示.
clip    剪切文本
ellipsis  显示省略符号(...) 

注意:
需要配合以下两个样式使用
1.overflow:hidden;      //溢出部分:隐藏
2.white-space:nowrap;   //文本不换行  

3.
背景 
注:先写上层的  
background: url(img/img_flwr.gif) no-repeat right bottom,url(img/paper.gif) repeat left top;

4.字体:加载外部字体
@font-face   规定,必须先定义一个字体的名称,然后指向该字体文件

@font-face {
    font-family:myfont;
    src: url(img/STXINGKA.TTF);
}

p{
    font-family: myfont;     
}

5.渐变
  线性渐变:向上 / 向下 / 对角方向
  径向渐变:由中心向四周扩散 (圆)

linear-gradient    线性渐变
background:linear-gradient (to right,red,blue)

radial-gradient   径向渐变

circle  圆形

转型:
transform
旋转:
2D旋转: rotate
3D旋转:rotateX  rotateY     单位:deg/角度

写法:
transform:rotate(180deg)

移动:
translate

写法:
transform:translate(x,y)
transform:translate(100px,300px)
transform:translateX(100px)
transform:translateY(100px)

缩放:
scale(1.2)    1.2倍       
scale(1.2,2)

改变锚点:

transform-origin: left;
transform-origin: 0% 0%;

动画:

定义动画:
@keyframes name{
    form{}
    to{} 
}
@keyframes name{
    0%{}
    10%{} 
    100%{}  
}

animation-name:  ;  调用动画名称    必填
animation-duration:2s;  动画的时间  必填

animation-timing-function:  定义速度曲线
值:
   ease  默认值      动画以低速开始,然后加快,再以低速结束.
   linear     速度相同
   ease-in    低速开始
   ease-out   低速结束
   ease-in-out    低速开始和结束

animation-delay   延迟执行     单位/s
animation-iteration-count   播放次数
   值:
     n            数字  次数
     infinite     无限次

animation-direction    播放周期
   值:
     normal   默认值    正常播放
     reverse   反向播放
     alternate     奇数正向,偶数反向
     alternate-reverse   奇数反向,偶数正向

animation-play-state    动画的运行与暂停
   值:
     running     默认值     运行
     paused      暂停