前端:3D立方体旋转轮播图特效(上)

前端轮播特效随着时代的发展,有着许多绚丽多彩的轮播特效,本次文章主要介绍一下如何制作3D立方体旋转轮播图切换特效,让轮播图的切换变得绚丽多彩。

下图是完成后的效果图

一、首先编写一个html结构

二、编写css样式

1、先构建一个banner容器样式

@charset "UTF-8";----编码格式声明

效果图:

一个居中的banner容器大小就写好了,接下来是书写四个li元素的样式

2、banner-item的样式

效果图:

使用浮动的方式,使四个li元素浮动起来,挤在同一行,并平分父级的宽度。因为父级元素的宽度为800px,在这里设li元素的宽度为200px。

ps:浮动后的元素会使元素向上浮动半级,会造成父级元素塌陷,需要清除浮动带来的影响。

清除浮动的常用方式,在浮动元素的父级元素上添加一个.clearfix的类名,通过伪元素来清除浮动带来的影响

3、给每个li元素里的div元素添加样式

效果图:

给每个div元素添加绝对定位是为了构成一个立方体,利用transform来变化四个div的位置,从而构成一个立方体

立方体的构造图图示:

4、给banner-cude的父元素样式类名banner-item添加相对定位的样式,然后利用transform变换div的位置

(1)首先屏蔽另外三个li元素,只使用一个li元素,先构造一个立方体

(2)编写div的样式,利用css3的:nth-child()选择器

效果图:

5、将注释的另外三个li元素放出来,效果图如下:

6、给banner容器添加一个鼠标移入,li元素发生变换的样式

代码图:

效果图:

这个效果与预期的效果不一样,我们需要的li元素有间隔性变化,而且是在同一个平面中轴转动。

修改代码:

给每个变化的li元素添加一个动画延迟时间,使其出现延迟变化;把整个banner容器往Z轴下拉一半的高度像素,再给每个li元素里的div元素在Z轴方向上往外拉一半的高度像素,使容器的选择在页面的平面上进行。

效果图:

7、给每个li元素里的div添加背景图片,并控制背景图片的位置

代码:

效果图:

ps:给最后一个li元素添加z-index: -1;的样式,可以消除最后一个元素不美观

ps:旋转180deg后,后面的图片是倒转的,给li元素的最后一个div元素添加上rotateX(180deg),使图片反转过来便可解决

到这里,基本上的样式和html结构已经写好了

html结构全部代码图:

css样式的全部代码图:

最终效果图:

写到这里,所有的代码都是html和css构成的,没有js部分,下一个文章,将开始讲解如何使用js来使这个轮播特效动起来,实现轮播的效果。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180710G18S6H00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券