使用css3的动画属性@keyframes创建小说轮播图

最近一直在琢磨做一个小说网站模板，在寻找灵感时发现一个很好的小说展示效果-小说三维轮播，如下图所示：

这种小说轮播展示方法不仅美观而且节省页面空间，那么他到底怎么实现的呢？由于本人是一个小白，所以去网上查了一下，但是很遗憾，没找到相关方法。

通过页面元素检查，发现他应该使用的是css的媒体属性@media并结合js的相关功能，应该挺复杂的，那么我们能不能用一种相对简单的方法实现它呢？答案是有。

通过css的动画属性@keyframes可以实现这种效果，下面一起来看看吧。

首先，我们来看一下css中@keyframes属性的相关介绍（先从简单的css动画了解，这有助于帮我们更好地了解实现过程，引用介绍来源于W3Cschool）：【如果你不想看这个，请直接拉到下文】

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：

实例
/* 动画代码 */
@keyframes example {from {background-color: red;}to {background-color: yellow;}
}/* 向此元素应用动画效果 */
div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;
}
亲自试一试

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％以及动画完成 100％时更改 <div> 元素的背景颜色：

实例
/* 动画代码 */
@keyframes example {0%   {background-color: red;}25%  {background-color: yellow;}50%  {background-color: blue;}100% {background-color: green;}
}/* 应用动画的元素 */
div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;
}
亲自试一试

下面的例子将在动画完成 25％，完成 50％以及动画完成 100％时更改背景颜色和 <div> 元素的位置：

实例
/* 动画代码 */
@keyframes example {0%   {background-color:red; left:0px; top:0px;}25%  {background-color:yellow; left:200px; top:0px;}50%  {background-color:blue; left:200px; top:200px;}75%  {background-color:green; left:0px; top:200px;}100% {background-color:red; left:0px; top:0px;}
}/* 应用动画的元素 */
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;
}
亲自试一试

延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-delay: 2s;
}
亲自试一试

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-delay: -2s;
}
亲自试一试

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 3;
}
亲自试一试

下面的例子使用值 "infinite" 使动画永远持续下去：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: infinite;
}
亲自试一试

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值

reverse - 动画以反方向播放（向后）

alternate - 动画先向前播放，然后向后

alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-direction: reverse;
}
亲自试一试

下面的例子使用值 "alternate" 使动画先向前运行，然后向后运行：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 2;animation-direction: alternate;
}
亲自试一试

下面的例子使用值 "alternate-reverse" 使动画先向后运行，然后向前运行：

实例
div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 2;animation-direction: alternate-reverse;
}
亲自试一试

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

linear - 规定从开始到结束的速度相同的动画

ease-in - 规定慢速开始的动画

ease-out - 规定慢速结束的动画

ease-in-out - 指定开始和结束较慢的动画

cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

实例
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
亲自试一试

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：

实例
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-fill-mode: forwards;
}
亲自试一试

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

实例
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-delay: 2s;animation-fill-mode: backwards;
}
亲自试一试

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

实例
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;animation-delay: 2s;animation-fill-mode: both;
}
亲自试一试

动画简写属性

下例使用六种动画属性：

实例
div {animation-name: example;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;
}
亲自试一试

使用简写的 animation 属性也可以实现与上例相同的动画效果：

实例
div {animation: example 5s linear 2s infinite alternate;
}
亲自试一试

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性描述

@keyframes 规定动画模式。

animation 设置所有动画属性的简写属性。

animation-delay 规定动画开始的延迟。

animation-direction 定动画是向前播放、向后播放还是交替播放。

animation-duration 规定动画完成一个周期应花费的时间。

animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。

animation-iteration-count 规定动画应播放的次数。

animation-name 规定 @keyframes 动画的名称。

animation-play-state 规定动画是运行还是暂停。

animation-timing-function 规定动画的速度曲线。

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

在了解css的@keyframes属性之后，我们需要用到的属性有：

1-animation-name ：绑定动画所属区块名称

2- animation-duration : 设置动画播放完毕所需时间
3- animation-iteration-count : 设置动画播放次数

很关键的一点，我们还需要使用css中z-index 来设置封面堆叠顺序以防出现封面重叠的错误，接下来直接上代码：

html文件：设置了四张小说封面用于演示

<!DOCTYPE html>
<html>
<head>
<title>小说轮播展示的css动画实现示例</title>
</head>
<body>
<div id="slide"><!--封推示例1--><div id="slide_1"><a href="http://b.faloo.com/f/1129595.html" title="洪荒：天崩开局，我打造神话世界" target="_blank"><img alt="洪荒：天崩开局，我打造神话世界" src="http://img.faloo.com/Novel/166x235/0/840/000840448.jpg" width="100%"></a></div><div id="slide_2"><a href="http://b.faloo.com/f/1129595.html" title="洪荒：天崩开局，我打造神话世界" target="_blank"><img alt="洪荒：天崩开局，我打造神话世界" src="http://img.faloo.com/Novel/166x235/0/840/000840446.jpg" width="100%"></a></div><div id="slide_3"><a href="http://b.faloo.com/f/1129595.html" title="洪荒：天崩开局，我打造神话世界" target="_blank"><img alt="洪荒：天崩开局，我打造神话世界" src="http://img.faloo.com/Novel/166x235/0/840/000840436.jpg" width="100%"></a></div><div id="slide_4"><a href="http://b.faloo.com/f/1129598.html" title="洪荒：天崩开局，我打造神话世界" target="_blank"><img alt="洪荒：天崩开局，我打造神话世界" src="http://img.faloo.com/Novel/166x235/0/840/000840435.jpg" width="100%"></a></div></div></body>
</html>

css代码实现：

<style>
ul li {list-style:none;}
#slide {width:160px;height:300px;}#slide_1 {width: 80px;height: 100px;left: 0px;/*float:left;*/position: absolute;z-index:0;animation-name: slide1;animation-duration: 6s;animation-iteration-count: infinite;
}@keyframes slide1 {0%   {width:60px; height:80px; z-index:0; left:0px; top:35px;}25%  {width:40px; height:60px; z-index:-1; left:60px; top:40px;}50%  {width:60px; height:80px; z-index:0; left:100px; top:35px;}75%  {width:80px; height:100px; z-index:1; left:40px; top:30px;}100% {width:60px; height:80px; z-index:0; left:0px; top:35px;}
}#slide_2 {width: 100px;height: 110px;/*float:left;*/left: 80px;position: absolute;z-index:1;animation-name: slide2;animation-duration: 6s;animation-iteration-count: infinite;
}@keyframes slide2 {0%   {width:80px; height:100px; z-index:1; left:40px; top:30px;}25%  {width:60px; height:80px; z-index:0; left:0px; top:35px;}50%  {width:40px; height:60px; z-index:-1; left:60px; top:40px;}75%  {width:60px; height:80px; z-index:0; left:100px; top:35px;}100% {width:80px; height:100px; z-index:1; left:40px; top:30px;}
}#slide_3 {width: 80px;height: 100px;/*float:left;*/left: 180px;position: absolute;z-index:0;animation-name: slide3;animation-duration: 6s;animation-iteration-count: infinite;
}@keyframes slide3 {0%   {width:60px; height:80px; z-index:0; left:100px; top:35px;}25%  {width:80px; height:100px; z-index:1; left:40px; top:30px;}50%  {width:60px; height:80px; z-index:0; left:0px; top:35px;}75%  {width:40px; height:60px; z-index:-1; left:60px; top:40px;}100% {width:60px; height:80px; z-index:0; left:100px; top:35px;}
}#slide_4 {width: 60px;height: 80px;/*float:left;*/left:80px;position: absolute;z-index:-1;animation-name: slide4;animation-duration: 6s;animation-iteration-count: infinite;
}@keyframes slide4 {0%   {width:40px; height:60px; z-index:-1; left:60px; top:40px;}25%  {width:60px; height:80px; z-index:0; left:100px; top:35px;}50%  {width:80px; height:100px; z-index:1; left:40px; top:30px;}75%  {width:60px; height:80px; z-index:0; left:0px; top:35px;}100% {width:40px; height:60px; z-index:-1; left:60px; top:40px;}
}
</style>

使用css3的动画属性@keyframes创建小说轮播图相关推荐

html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图
最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下.(找不到原网址了-.-...就不贴了...) (如果不了解transition ...
html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图
最近想本身写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,本身学习了后整理以下.(找不到原网址了-.-...就不贴了...) (若是不了解transition ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
android banner动画框架,Android Studio Banner轮播图使用
现在恰好有个项目需要做个轮播图效果,这个需求也是很常见的需求,于是就做个笔记写一下实现过程分为加载本地图片和网络图片加载本地图片第一步:先在build.gradle中加入banner和glide ...
【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
CSS3动画巧妙实现轮播图效果
C3增加了很多新的内容,其中动画部分更是分担了js引擎的内容,今天小编来分享一种简单的轮播图制作方法. 首先搭建两个嵌套关系的盒子,盒子最内部放入轮播图素材. <section><d ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
css3 特效加1加2,Bootstrap轮播加上css3动画，炫酷到底！
很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 介绍Animate ...

使用css3的动画属性@keyframes创建小说轮播图

什么是 CSS 动画？

@keyframes 规则

实例

实例

实例

延迟动画

实例

实例

设置动画应运行多少次

实例

实例

反向或交替运行动画

实例

实例

实例

指定动画的速度曲线

实例

指定动画的填充模式

实例

实例

实例

动画简写属性

实例

实例

CSS 动画属性

使用css3的动画属性@keyframes创建小说轮播图相关推荐

最新文章

热门文章