2017-02-27 CSS3学习笔记

盒子阴影和文字阴影

• 如何给盒子添加阴影
  box-shadow: 水平位移 垂直位移 模糊度 阴影扩展 阴影颜色 内外阴影;

注意点：

• 盒子的阴影分为内外阴影，默认情况下就是外阴影
• 快速添加阴影只需要填写三个参数即可
  box-shadow:水平偏移 垂直偏移 模糊度;
  默认情况下阴影的颜色和盒子内容的颜色一致
• 给文字添加阴影
  text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；

.box2{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            /*text-shadow: 10px 10px 10px black;*/
            text-shadow: 10px 10px 10px;
            color: purple;
        }

动画模块

• 过渡和动画之间的异同
• 不同点
  过渡不人为的触发才会执行动画效果，动画不需要人为的触发就可以执行动画
• 相同点
  过渡和动画都是用来给元素添加动画的
  过渡和动画都是系统新增的一些属性
  过渡和动画都需要满足三要素才会有动画效果

/*告诉系统需要执行哪个动画*/
animation-name:lnj;

/*告诉系统我们需要自己创建一个名称叫做 lnj 的动画*/
@keyframes lnj{
          from{
                  margin-left:0;
          }
          to{
                  margin-left:500px;
          }
}
/*告诉系统动画持续的时长*/
animation-duration:3s;

动画模块的其他属性上

• 播放延迟

/*告诉系统多少秒之后开始执行动画*/
animation-delay:2s;

• 执行速度

/*告诉系统动画执行的速度*/
animation-timing-function:linear;
/* 取值  linear ease-in ease-out ease-in-out */

• 执行次数

/*告诉系统动画需要执行几次*/
animation-iteration-count:3;

• 执行往返

/*告诉系统是否需要执行往返动画*/
animation-direction:alternate;
/*默认取值 normal 执行完一次之后回到起点袭击执行下一次*/
/*alternate,往返动画，执行完一次之后往回执行下一次*/

动画模块的其他属性下

• 通过我们的观察动画是有一定的状态的

• 等待状态

• 执行状态

• 结束状态

• animation-fill-mode 作用:
  指定动画等待状态和结束状态的样式

• 取值
  none:不做任何改变
  forwards:让元素结束状态保持动画最后一帧的样式
  backwards:让动画等待状态的时候显示动画第一帧的样式
  both:让元素等待状态显示动画第一帧的样式，让袁术借宿状态保持动画最后一帧的样式

动画的另一种格式

 @keyframes sport {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }
        }

动画模块的连写

• 动画模块连写格式
  animation: 动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
• 动画模块连写格式的简写
  animation:动画名称 动画时长;

3D转换模块

• 什么是 2D 和 3D
  2D 就是一个平面，只有宽度和高度，没有厚度
  3D 就是一个立体，有宽度和高度，还有厚度
  默认情况下所有的元素都是呈 2D 展现的
• 如何让某个元素呈 3D 展现
  和透视一样，向看到某个元素的3D效果，只要给它的父元素添加一个 transform-style 属性，然后设置为 preserver-3d 即可
• 想看到整个立方的近大远小效果，就给 ul 的父元素添加透视效果

perspective:500px;

transform:translateX(200px) rotateY(90deg)

/*translate 拉伸也可以设置 X 方向 Y 方向 Z 方向 结尾加X/Y/Z
只要父元素被拉伸了，子元素也会被拉伸
*/

注意点

• 动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性
• 在编写动画的时候固定不变的值写在后面，需要变化的值写在后面