前端轮播特效随着时代的发展,有着许多绚丽多彩的轮播特效,本次文章主要介绍一下如何制作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来使这个轮播特效动起来,实现轮播的效果。
领取专属 10元无门槛券
私享最新 技术干货