10.14课堂内容

标签：io   ar   for   sp   div   on   ad   ef   line   

颜色渐变：

/*渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))*/

background: -webkit-gradient(linear, 0% 10%, 0% 100%, from(yellow), to(blue));

阴影效果：

text-shadow:10px 10px 5px blue; 

                   X轴  Y轴 模糊度 颜色

背景填充：

background:-webkit-gradient(linear,left top,left bottom,from(#faa));

=

background:#faa;

触动效果：

.xx:hover{
/*width: 100px;*/
/*height: 50px;*/
-webkit-animation: 1.5s zzq infinite;
}
@-webkit-keyframes zzq {
from { -webkit-transform: none;
/*-webkit-transform:rotate(10deg);*/}
25% { -webkit-transform:rotate(-30deg);}
/*50% { -webkit-transform:rotate(0deg);}*/
75%{ -webkit-transform:rotate(30deg);}
/*100%{ -webkit-transform:rotate(30deg);}*/

翻转效果：

xx(如div) {
/*/翻转*/
-webkit-box-reflect:below -20px;

　　　　　　　　　　　　　和文字距离

}
.xx {
/*/翻转*/
-webkit-box-reflect:below 2px -webkit-linear-gradient(transparent,transparent 20%,rgba(10,10,10,0.2));

10.14课堂内容

标签：io   ar   for   sp   div   on   ad   ef   line   

原文地址：http://www.cnblogs.com/chenjiren0109/p/4025317.html