这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板。主要想法是在面板中使用背景图片,然后在点击标签后使之动画。
HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下:
1
2
3
4
Slice 1 - Image 1
Slice 1 - Image 2
Slice 1 - Image 3
Slice 1 - Image 4
Slice 2 - Image 1
Slice 2 - Image 2
Slice 2 - Image 3
Slice 2 - Image 4
Slice 3 - Image 1
Slice 3 - Image 2
Slice 3 - Image 3
Slice 3 - Image 4
Slice 4 - Image 1
Slice 4 - Image 2
Slice 4 - Image 3
Slice 4 - Image 4
Serendipity
What you've been dreaming of
Adventure
Where the fun begins
Nature
Unforgettable eperiences
Serenity
When silence touches nature
CSS样式
主要的目地是先通过label来隐藏radio按钮。点击label后将会使得分开的checkbox或者radio按钮选择。给input一个ID,我们可以使用for=idref属性。
第二我们希望将所有的背景图片放置正确,第三,我们希望点击label的时候显示分开的图片切割线和标题。