转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：https://blog.csdn.net/pcaxb/article/details/87251949
CSS3新特性总结
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
1.过渡(transition)
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
(1)规定您希望把效果添加到哪个 CSS 属性上
(2)规定效果的时长
简写语法：
transition: property duration timing-function delay;
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
单个语法：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
<!-- 1.过度 -->
<div class="div0 div1"></div>
<div class="div0 div2">123</div>
<div class="div0 div3">CSS3过渡</div>
/* 过渡样式 */
.div0{
width: 100px;
height: 100px;
background-color: bisque;
}
.div1{
transition: width 2s;
}
.div1:hover{
width: 400px;
}
.div2{
transition: width 2s,height 2s,transform 2s ease;
}
.div2:hover{
width: 300px;
height: 300px;
/* 旋转的时候一定要注意使用过度，不然可能看不出来，以为没有旋转 */
transform: rotate(180deg);
}
.div3{
background-color: #92B901;
color: white;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 2s ease .5s,width 2s,height 2s ease 2s;
}
.div3:hover{
width: 160px;
height: 160px;
background-color: #1ec7e6;
transform: rotate(360deg);
}
2.动画(animation)
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则 ：如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
简写语法：
animation: name duration timing-function delay iteration-count direction;
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
单个语法：
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。n|infinite(规定动画应该无限次播放)
animation-direction 规定是否应该轮流反向播放动画。normal(正常播放)|alternate(轮流反向播放);
animation-timing-function 规定动画的速度曲线。
1)linear 动画从头到尾的速度是相同的。
2)ease 默认。动画以低速开始，然后加快，在结束前变慢。
3)ease-in 动画以低速开始。
4)ease-out 动画以低速结束。
5)ease-in-out 动画以低速开始和结束。
6)cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-fill-mode : none | forwards | backwards | both;
1)none：不改变默认行为。
2)forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
3)backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
4)both：向前和向后填充模式都被应用。
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
1)规定动画的名称
2)规定动画的时长
<!-- 动画 -->
<div class="div1"></div>
<div class="div2"></div>
@keyframes fd{
from {width: 100px;height: 100px;background-color: red;border-radius: 50%;}
to {width: 400px;height: 400px;background-color: greenyellow;border-radius: 50%;}
}
.div1{
animation: fd 5s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: red;
}
3.形状转换(transform)
下次补上
4.阴影
1.box阴影
box-shadow 属性向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
1)h-shadow 必需。水平阴影的位置。允许负值。
2)v-shadow 必需。垂直阴影的位置。允许负值。
3)blur 可选。模糊距离。
4)spread 可选。阴影的尺寸。
5)color 可选。阴影的颜色。
6)inset 可选。将外部阴影 (outset) 改为内部阴影。
2.text阴影
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
text-shadow: h-shadow v-shadow blur color;
1)h-shadow 必需。水平阴影的位置。允许负值。
2)v-shadow 必需。垂直阴影的位置。允许负值。
3)blur 可选。模糊的距离。
4)color 可选。阴影的颜色。
box阴影
<div class="div2"></div>
text阴影
<div class="div3">没有什么</div>
.div2{
width: 100px;
height: 100px;
margin: 100px;
background-color: green;
box-shadow: 10px 10px 10px 10px greenyellow inset;
}
.div3{
font-size: 48px;
text-shadow: 2px 2px 2px red;
}
5.边框
。。。未完，继续
参考资料：CSS3新特性总结
CSS3新特性总结
博客地址：https://blog.csdn.net/pcaxb/article/details/87251949