特效
知识点1.box-shadow盒子阴影
定义：盒在显示时产生阴影效果。
box-shadow: X轴偏移量 Y轴偏移量 模糊距离 阴影尺寸 颜色 投影方式
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
是指阴影水平偏移量其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
v-shadow 必需。垂直阴影的位置。允许负值。
是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
blur 可选。模糊距离。
此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
spread 可选。阴影的尺寸。
此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
color 可选。阴影的颜色。请参阅 CSS 颜色值。
此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
inset 可选。将外部阴影 (outset) 改为内部阴影。
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入代码片
知识点2.text-shadow文本阴影
text-shadow: h-shadow v-shadow blur color;
text-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
h-shadow 必需。水平阴影的位置。允许负值。
这两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。使用text-shadow属性时必须指定这两个参数，可以对这两个参数指定负数值。
v-shadow 必需。垂直阴影的位置。允许负值。
在这里插入代码片
blur 可选。模糊的距离。
text-shadow:所使用的第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径越大，则外阴影向外模糊的范围也就越大，模糊半径的值越小，阴影向外模糊的范围越小。
模糊半径参数为可选参数，省略这个参数时，该参数默认值为0，代表阴影不向外模糊。
color 可选。阴影的颜色。
text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色，该参数可以放置在其他三个参数之后，也可放在其他三个参数之前，成为第一个参数。该参数为可选参数，不对这个参数进行指定时，使用文字颜色。
知识点3.gradient渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。渐变分为径向渐变和线性渐变。
绘制线性渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background:linear-gradient(to bottom,red,yellow);
第一个参数可指定的参数值如下：
参数值 渐变方向
to bottom 从上往下
to right 从左往右
to top 从下往上
to left 从右往左
第二个参数和第三个参数分别表示渐变的起点色和终点色。
径向渐变（Radial Gradients）- 由它们的中心定义
background:radial-gradient(red,yellow);
第一个参数和第二个参数分别表示渐变的起点色和终点色。
background:radial-gradient(circle at left top,red,yellow);
知识点4.transform
第1项.transform-origin转换原点
ransform-origin 属性用来指定元素的转换原点位置
默认情况下，转换的原点在元素的中心点
或者是 X 轴和 Y 轴的 50% 处
transform-origin : 数值/百分比/关键字;
两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴
#d1
{
transform:rotate(90deg) scale(0.5);
transform-origin:right top;
}
#d2
{
transform:rotate(90deg) scale(0.8);
transform-origin:100% 100%;
}
第2项.translate位移
translate() 方法将元素从其当前位置移动
移动到 x 坐标和 y 坐标位置参数
translate(x) 或者 translate(x,y)
可取值
数值、百分比
也可以是负值
也可以使用单向位移函数
translateX(x)
translateY(y)
是css3得属性；渲染效率高，相比较定位来说；
第3项.scale缩放
scale() 方法用于改变元素的尺寸
根据给定的宽度（X 轴）和高度（Y 轴）
scale(x) 或者 scale(x,y)
一个参数时，第二个参数默认与第一个值相等
可取值
默认值为1
缩小：0 到 1 之间的数值
放大：大于 1 的数值
也可以使用单向缩放函数
scaleX(x)
scaleY(y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
#imgs
{
position: absolute;
width: 108px;
height: 67px;
}
#imgs::after,#imgs::before
{
display: block;
content: "";
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
background-image:url("image/icon_c.jpeg");
background-size: cover;
background-position: center;
}
#imgs::before
{
top: 0;
bottom: 49%;
transform: scaleY(-1);
}
#imgs::after
{
top:49%;
bottom: 0;
}
</style>
</head>
<body>
<div id="imgs" ></div>
</body>
</html>
第4项.Rotate旋转
rotate() 方法用于旋转元素
根据原点，将元素按照顺时针旋转给定的角度
允许负值，元素将逆时针旋转
rotate(deg)
div
{
width:150px;
height:150px;
border:1px solid black;
}
#d1
{
transform:rotate(45deg);
background-color:#ccc;
}
#d2
{
transform:rotate(-45deg);
transform-origin:right top;
background-color:#ccc;
}
rotateY
3D旋转
perspective透镜
父级元素的透镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div0
{
width: 400px;
height: 400px;
perspective: 500px;
}
#div0 div
{
width: 200px;
height: 200px;
background-color: chartreuse;
transition: all 1s;
margin: auto;
}
#div0 div:hover
{
transform: rotateY(30deg);
transition: all 1s;
}
</style>
</head>
<body>
<div id="div0">
<div></div>
</div>
</body>
</html>
第5项.Skew倾斜（skewX，skewY）
skew() 方法用于让元素倾斜
以原点位置，围绕 X 轴和 Y 轴按照一定的角度倾斜
可能会改变元素的形状
skew(x) 或者 skew(x,y)，取值为角度
也可以使用单向倾斜函数
skewX(x)
skewY(y)
div {
width:150px;
height:150px;
border:1px solid black;
}
#d1 {
transform:skewX(45deg);
background-color:#ccc;
}
#d2 {
transform:skewY(45deg);
transform-origin:right top;
background-color:#ccc;
}
简写transform:translate(60px,-120px) scale(2);
3D动画
3D转换
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
3D 翻转方法：
rotateX(30deg)
rotateY(30deg)
注： Internet Explorer 和
Opera
不支持 rotateX, rotateY 方法。
扩展
rotate和rotateZ()效果一样
3D位移
3D位置移动 的3种写法
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
在2D的基础上多了1D (Z轴)
3D视距
3D视距
perspective
元素要使用3D效果 需要perspective属性配合
方法1：
<div>
<p></p>
</div>
方法2:
<p></p>
div{perspective:200px;}
p{width:100px;height:100px;
transform:translate3d(0,0,-50px);background:#ff9;}
p{width:100px;height:100px;
transform:perspective(200px) translate3d(0,0,-50px);
background:#ff9;}
3D视角
3D缩放翻转
scaleZ
父框设置
perspective:1200px(3D视距)
transform-style:preserve-3d;(3D视角)
（子元素保持3D位置）
transform-origin:left/top/right/bottom
翻转位置
例：preserve-3d.html
平面上看3D是看视距，但是旋转上观看是看3D视角(在加视角的时候删除视距)
动画
知识点1.过渡动画（transition）
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover。CSS3 提供了 transition 属性来实现这个过渡功能
transition-property
设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元 素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性
设置背景和文字颜色采用过渡效果
transition-property: background-color, color, margin-left;
none
all
指定样式属性
就是那些属性需要进行设置该过度的
transition-duration
如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默 认情况下过渡时间为 0。
transition-duration: 1s;
就是变化的过度需要的时间
transition-timing-function
当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过 渡到终止状态时速度由快到慢，逐渐变慢，即 ease。也是默认值，其他几种缓动方式如下 表所示：
ease：慢快慢
由快到慢
linear：匀速
恒速
ease-in：慢开始
越来越快，加速
ease-out：慢结束
越来越慢，减速
ease-in-out：慢开始慢结束
先加速再减速
cubic-bezier：自定义贝兹尔曲线
transition-delay延迟多长时间开始
这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用 transition-delay 属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。
transition 简写
我可以直接使用 transition 来简写，有两种形式的简写。第一种是，每个样式单独声 明；第二种是不去考虑样式，即使用 all 全部声明。 //单独声明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
//如果每个样式都是统一的，直接使用 all
transition: all 1s ease 0s;
知识点2.动画（animation ）
CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。
animation 实现动画效果主要由两个部分组成：
1.通过类似 Flash 动画中的关键帧声明一个动画；
2.在 animation 属性中调用关键帧声明的动画。
第1项.animation 与关键帧
animation 属性
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
ease由快到慢
linear恒速
ease-in越来越快，加速
ease-out越来越慢，减速
ease-in-out先加速再减速
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
n
infinite无限次
animation-direction 规定是否应该轮流反向播放动画。
normal
alternate一次前一次后交替效果
animation-fill-mode 结束后不返回
forwards 结束停留在最后一帧
none
关键帧 @keyframes
@keyframes myani {
0% {
background-color: white;
margin-left:0px; }
50% {
background-color: black;
margin-left:100px; }
100% {
background-color: white;
margin-left:0px; }
}
重复
@keyframes myani {
0%, 100% {
background-color: white;
margin-left:0px;
}
50% {
background-color: black;
margin-left:100px;
}
}
的先设置动画，之后就可以启动动画
第2项.animate css插件的使用
1、首先引入animate css文件
<link rel="stylesheet" href="animate.min.css">
2、给指定的元素加上指定的动画样式名
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#jq22{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
