如何使用css3技术实现幻灯片效果

html-css07

如何使用css3技术实现幻灯片效果,第1张

使用css3技术实现幻灯片效果

HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下:

<section class="cr-container">

<!-- radio buttons and labels -->

<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>

<label for="select-img-1" class="cr-label-img-1">1</label>

<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />

<label for="select-img-2" class="cr-label-img-2">2</label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />

<label for="select-img-3" class="cr-label-img-3">3</label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />

<label for="select-img-4" class="cr-label-img-4">4</label>

<div class="clr"></div>

直接CSS是写不出来的,因为幻灯片是在一定时间之后做一个动画移动。

不过,用CSS3可以实现,只是浏览器的兼容性不好。

其实,这个本身就是JS的事情,为什么非得用CSS来做呢。