教你如何写出一个碎片轮播~

html-css08

教你如何写出一个碎片轮播~,第1张

对于几乎每一个入行前端的小伙伴来说,轮播图几乎都是必修课,但是，只是单纯的切换过渡可能并不能满足于你追求酷炫的心hh，那么这里就教你利用css3的clip-path来模拟碎片并为你的轮播图添加碎片轮播的效果！

对于一张图片来说，如果在原有的基础上添加一层蒙版，遮蔽住不想让用户见到的视图,剩下的视图即可作为一个'碎片',这层蒙版效果我们怎么制作？答案就是利用clip-path

因此,利用clip-path就可以做出一个一个碎片!

很简单利用绝对定位即可

其实也很简单，仔细看文首gif你会发现碎片的飞出动效无非是两种

1.移动

2.缩小

那么飞入动效也只是飞出动效的反转而已！

每次点击轮播切换按钮时，只需要动态的添加up-leave up-enter down-leave down-enter 即可完成碎片轮播的效果！

PS：缩小动画得注意变形基点，否则变形基点默认位于图片中部而不是碎片中部，放缩的效果会大打折扣！

html没有什么三大碎片，只有三大元素分类，分别是：顶级、块级、内联。

顶级：包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

块级：顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block将其更改成块级元素。此外还有个特殊的，float也具有此功能。

块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

内联：通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。

HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。