这里是修真院前端小课堂，本篇分析的主题是

【用CSS写一个简单的幻灯片效果页面】

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【用CSS写一个简单的幻灯片效果页面】

1.背景介绍

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

Animation字面上的意思，就是“动画”的意思，

我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，

我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。

2.知识剖析

animation: name duration timing-function delay
iteration-count direction fill-mode play-state;

对应：

animation:marginLeft 10s linear 2s infinite
100 reverse paused

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”。

下面我们就一起来看看这个“Keyframes”是什么东西。一个动画初始属性和最终属性，

一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，

如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，

此时我们需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

3.常见问题

@keyframes规则

兼容性该如何解决

4.解决方案

在CSS3中创建动画，您需要学习@keyframes规则。

Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，

后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，

有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，

如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，

我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，

比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，

我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，

也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是，

其中"0%"不能像别的属性取值一样把百分比符号省略。

Internet Explorer 11、Firefox以及Opera支持@keyframes规则和animation属性。

5.编码实战

6.扩展思考及讨论

如何用JQ写幻灯片效果页面.

7.参考文献

参考一：Baidu

参考二：JQ之家

七、PPT链接：

ppt链接

用CSS写一个简单的幻灯片效果页面相关推荐

css写的一个简单的幻灯片效果页面
制作幻灯片,第一反应是用css3的Animation,那我就简单介绍一下Animation. CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. t ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...

用CSS写一个简单的幻灯片效果页面