Web2.0学习

第二章 动画设计

Border边框设计

设置格式：
border-子属性：顶，右，下，左

注意radius属性是左上角-右上角-右下-左下。

Text Effect设计

font外链字体

@font-face块定义一个字体的名称和位置，但是要注意IE和其它浏览器的兼容问题，所以最好写两条对应的定义。

shadows阴影设计

外阴影和内阴影

Transform和Transition

Transform变换位置
利用transform变换位置，不会跟flow等定位控制冲突。
例子：

倾斜:skew(x,y); x轴倾斜和y轴倾斜

Transition过渡动画

值	描述
transition-property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration transition	效果需要指定多少秒或毫秒才能完成（s或ms）
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候（s或ms）

简写形式、和挨个定义
简写的时候，各属性按照以下顺序：
property-durantion-function-delay

transition:color 0.2s ease-out, transform 0.2s 2s ease-out;
//分别定义color和transform的过渡效果 

Animation动画

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

@keyframes 规则

定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将任意一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

兼容问题
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

伪元素和伪类

学习心得

如何使所有项目重叠在一起？

比如链表项目，给所有li应用position:absolute，并指定相同的长宽和位置即可。

#control-ring-container li {
  list-style: none;
  position: absolute;/*使用absolute定位，将所有li重叠*/
  display: block;
  width: 32px;
  height: 32px;
  margin-top: 60px;
  margin-left: 35px;
  border-radius: 50%;
  
  background: #686868  center no-repeat;
  background-size: 60%;
  transition: all 0.5s;
  opacity: 0;
}

如何使内容的排布呈现圆形？

把包含内容的外框变成圆形。

#control-ring-container {
  position: absolute;
  width: 180px;
  height: 180px;
  bottom: 20px;
  left: 0px;
  border-radius: 50%;  /*把框变成圆形*/
}

如何给行内元素设置高度？

如何把块元素设置成同行？

将行内元素变成inline-block，使之兼具inline同行和block宽高的属性。

span{
	display: inline-block;/*才能设置高度*/
}

修饰过渡动画中出现的溢出框的问题

overflow: hidden;

比较实用的定位方式

 position: absolute;

:hover使用中比较实用的方式

给单独一个外框架设置hover，以此控制内部的所有动画。
如例子中是给button设置:hover，然后控制li的子项目

#button:hover #control-ring li:nth-child(1) {
  margin-top: 20px;
  margin-left: -30px;
  background-image: url('assets/images/nomask.png');
}

vertical-align和text-align的使用存有疑惑