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

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

使用css3的动画属性@keyframes创建小说轮播图_第1张图片使用css3的动画属性@keyframes创建小说轮播图_第2张图片

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

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

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

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

什么是 CSS 动画?

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

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

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

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

@keyframes 规则

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

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

下面的例子将 "example" 动画绑定到

元素。动画将持续 4 秒钟,同时将
元素的背景颜色从 "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% 时更改

元素的背景颜色:

实例

/* 动画代码 */
@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% 时更改背景颜色和

元素的位置:

实例

/* 动画代码 */
@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 属性指定动画应运行的次数。

下面的例子在停止前

你可能感兴趣的:(前端模板制作,css,html5,css3,前端框架,ui)