特效描述：html5 css3仿ppt 幻灯片播放动画。html5 css3制作鼠标滚动设置幻灯片播放动画。仿ppt幻灯片播放预览动画特效。带响应式的ppt幻灯片播放。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

CSS3

使用鼠标滚轮进行切换

1. CSS3 边框属性
2. CSS3 文本效果
3. CSS3 2D转换
4. CSS3 3D转换
5. CSS3 过渡
6. CSS3 动画

一、边框属性

1.border-radius

border-radius: 圆角边框，圆

*语法：border-radius: length | %

圆角边框

圆

半圆

2.box-shadow

box-shadow: 阴影

*语法：box-shadow: h-shadow v-shadow blur spread color inset

水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的尺寸, 阴影的颜色, 将外部阴影 (outset) 改为内部阴影

二、文本效果

1.text-shadow

text-shadow: 文本阴影

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

水平阴影、垂直阴影、模糊距离，以及阴影的颜色

文本阴影效果

2.word-wrap

word-wrap: 自动换行

*语法： word-warp: normal | break-word

Honorificabilitudinitatibus, in Latin

三、2D转换

1.transform

实现元素的位移、旋转、变形、缩放

移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

2.transform: translate(x, y)

移动 translateX(n) 沿着X轴移动；
移动 translateY(n) 沿着Y轴移动；
移动 translate(x,y) 沿着X,Y轴移动；

3.transform: scale(x, y)

缩放 scaleX(n) 改变元素的宽度；
缩放 scaleY(n) 改变元素的高度；
缩放 scale(x,y) 改变元素的高度和宽度；

4.transform: rotate(deg)

*旋转只是在平面内旋转，没有X,Y轴概念，在3D转换中才有X,Y,Z轴，正值为顺时针，负值为逆时针。

旋转

5.transform: skew(deg, deg)

倾斜 skewX(deg) 定义2D倾斜转换，沿着X轴；
倾斜 skewY(deg) 定义2D倾斜转换，沿着Y轴；
倾斜 skew(deg, deg) 定义2D倾斜转换，沿着X,Y轴；

Y轴倾斜

X轴倾斜

X,Y轴

四、3D转换

1.3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直

3D坐标轴

左手坐标系

X轴

Y轴

Z轴

2.transform: translate

translate3d(x,y,z) 定义3D转化；
translateZ(z) 仅使用于Z轴的值；

translate3d

3.transform: scale

scale3d(n,n,n) 定义3D缩放；
scaleZ(n) 给定Z轴值；

scale3d(n,n,n)

4.transform: rotate

rotateX(x) 定义沿着X轴旋转；
rotateY(y) 定义沿着Y轴旋转；
rotateZ(z) 定义沿着Z轴旋转；
rotate3d(x,y,z,angle) 定义3D旋转；

x 类型，表示旋转轴X坐标方向的矢量。y 类型，表示旋转轴Y坐标方向的矢量。z 类型，表示旋转轴Z坐标方向的矢量。a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

X轴旋转

Y轴旋转

Z轴旋转

X,Y,Z

五、过渡

1. transition

可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

transition用于在一个属性中设置四个过渡属性
transition-property规定应用过渡的 CSS 属性的名称
transition-duration定义过渡效果花费的时间
transition-timing-function规定过渡效果的时间曲线
transition-delay规定过渡效果何时开始

六、动画

1. @keyframes

在 CSS3 中创建动画，必须要知道 @keyframes 规则，@keyframes 规则用于创建动画，通常使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

@keyframes changeBg {

from {background:red;}

to {background:yellow;}

}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。必须要规定动画的名称，动画的时长

2. animation

@keyframes 规定动画；
animation 所有动画属性的简写属性，除了 animation-play-state 属性；
animation-name 规定 @keyframes 动画的名称；
animation-duration 规定动画完成一个周期所花费的秒或毫秒(0)；
animation-timing-function 规定动画的速度曲线(ease)；
animation-delay 规定动画何时开始(0)；
animation-iteration-count 规定动画被播放的次数(1)；
animation-direction 规定动画是否在下一周期逆向地播放(normal)；
animation-play-state 规定动画是否正在运行或暂停(running)；
animation-fill-mode 规定对象动画时间之外的状态。

3. 案例

animation

thanks

1/9

$(document).ready(function() {

var $demo = $('.demo');

var numOfSections = $('.demo__section').length;

$(document).on('click', '.demo__menu-btn', function() {

$demo.addClass('menu-active');

});

$(document).on('click', '.demo__close-menu', function() {

$demo.removeClass('menu-active');

});

$(document).on('click', '.demo.menu-active .demo__section', function() {

var $section = $(this);

var index = +$section.data('section');

$('.demo__section.active').removeClass('active');

$('.demo__section.inactive').removeClass('inactive');

$section.addClass('active');