CSS效果与动画

CSS效果

效果属性

1. box-shadow

• 该属性向框添加一个或多个阴影，属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
• 语法格式

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的偏移，允许负值。
v-shadow	必需，垂直阴影的偏移，允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸，即扩展区域，允许负值（缩小阴影）
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

补充：对于color值，可以使用rgba(r,g,b,value),最后一个值value表示透明度，介于0-1之间，0为全透明，1为不透明

2. text-shadow（关于文字的样式效果）

• text-shadow 属性向文本设置阴影。
• 语法格式

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的偏移，允许负值。
v-shadow	必需，垂直阴影的偏移，允许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。

3. border-radius

• border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性，分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。因此，如果仅设置一个值的话border-radius：10px，等价于border-radius : 10px 10px 10px 10px;
• 注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序
• border-radius可以省略部分值，如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
• border-radius的数值有三种表示方法：px、%、em。在使用px来表示圆角值的时候，圆角的弧度一般都是一个以宽高为半径的圆形的1/4弧形，然后把效果加在实际大小中，受边框border 的影响；在使用%来表示圆角值的时候，不受边框border的影响，若对象的宽高相等，则乘上百分比就是圆角的大小（当50%或者以上时，成为圆形），若对象宽高不等，圆角的弧度以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。
• 另一种写法（W3C）

border-radius: 1-4 length|% / 1-4 length|%

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径

4. background

• background 简写属性在一个声明中设置所有的背景属性。

• 可用于：纹理、图案的变化；渐变；雪碧图动画；背景图尺寸适应
  PS：雪碧图是什么？
  Answer： 雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理。而所谓的雪碧图动画，就是把多帧要显示的动画切成多张图片排列在一起，通过CSS动画属性使图片变换，从而达到动画效果。

• 可能取值（参考w3c)

值	描述
background-color	规定要使用的背景颜色
background-position	规定背景图像的位置
background-size	规定背景图片的尺寸
background-repeat	规定如何重复背景图像
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动
background-image	规定要使用的背景图像
inherit	规定应该从父元素继承 background 属性的设置

5. clip-path

• clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见，哪个区域不可见，只有在闭合路径内的部分才显示。
• 可用于：对容器进行裁剪；定义几何图形；自定义路径。
• 可以通过url 引入内嵌的或者外置的SVG，又或者是直接用自带的形状为clip-path 属性指定路径
  PS：SVG是什么？
  Answer： 英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形
• 特点：
  1 调整图案形状时，容器的占位和大小是不变的（而border-radius是改变了容器大小）
  2 支持容器内的动画

6.边框

1. border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式
   可能的取值（参考w3c)：CSS border-style属性

2. border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边按照上、右、下、左的顺序分别设置不同的颜色。
   可能的取值（参考w3c）

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

如果将元素大小设置0，边框设置不同大小和颜色，效果如下：

<style>
        .test{
            width:0;
            height:0;
            border-width:50px 30px 20px 80px;
            border-style:solid;
            border-color:blueviolet darkkhaki springgreen crimson;
        }
</style>

3. 利用边框实现三角形的绘制
   边框加上颜色后，可以看出是三角形，利用border-color属性把任意三条边框设置透明即可

<style>
        .test{
            width:0;
            height:0;
            border-width:50px 30px 20px 80px;
            border-style:solid;
            border-color:transparent transparent transparent crimson;
            /*将三条边框设置透明*/
        }
</style>

CSS动画

• 动画的作用：引起注意、信息反馈、加载掩饰
• 补间动画transition，参考w3c：CSS动画-transition
• animation属性可以通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：1）通过类似Flash动画中的帧来声明一个动画； 2）在animation属性中调用关键帧声明的动画。参考w3c：CSS动画-animation

1、如何平移/放大/旋转一个元素
　　使用transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。详见：CSS动画-transform
　　以下仅讨论2D变换：
　　平移元素：translateX(-100px)在X轴方向上向左移动100个像素（向右为正方向），同理有translateY(-100px)（向下为正方向），可以合并写为translate(-100px,-100px)
　　放大/缩小元素：transform:scale(0.3,2);在x轴方向变为原来0.3倍，在y轴方向 变为原来2倍。可以为负，此时先旋转180度后再缩放
　　旋转元素：transform:rotate(-30deg);逆时针旋转30度（值为正顺时针旋转，为负逆时针旋转）
　　
2、如何实现transition动画
　　元素的状态必须有所改变，即transition就是实现元素两种状态之间的衔接过程。
　除了参考w3c的介绍后还有几点需要注意：
　① transition: all 1s;这种写法是指所有属性均应用动画；
　②transition: width 1s ,background-color 1s; 支持多个属性变化，每种属性之间要用逗号隔开；
　③过渡效果通常在用户将鼠标指针浮动到元素上时发生，单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有: hoever 、focus 、checked 媒体查询触发和JavaScript触发；
　④transition只能定义开始状态和结束状态，不能定义中间状态；

3、如何实现帧动画?
　　依旧使用keyframe来实现，中间每一个关键帧之间有过渡动画叫做关键帧动画，没有过渡动画的叫逐帧动画。
　　逐帧动画的特点：适用于无法补间计算的动画、资源较大、使用steps（）。
　　@keyframes 用来指定CSS动画一次循环中，多个时间节点处的CSS属性，默认会补充补间动画，来实现关键帧动画。例如：

　　@keyframes run{
            0%{ /*0%可以写成from*/               
                width: 100px;
            }
            10%{
                width: 50px;
            }
            90%{
                width: 850px;
            }
            100%{/*100%可以写成to */
                width: 800px;
            }

这段代码定义了一个名为run的CSS动画，在一次循环中指定了4个时间点，使div的width属性进行变化。
　　而animation-timing-function: steps(1);则指定了各个时间点过渡时，采用一段式阶跃函数，即消除了补间动画，常用于无法补间计算或不适合补间计算的动画，从而实现逐帧动画。