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

html-css09

如何使用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的hover，也就是纯css菜单的原理，

点击式的利用的是锚点的原理。

实例如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯CSS实现的Tab</title>

<style>

*{ margin:0 padding:0}

#main{width:500px margin:100px auto}

#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}

#content{ width:500px height:300px border:1px solid #000 overflow:hidden}

#content>div{float:left padding:2px 4px width:500px height:300px}

#a1:hover #a2>#tab2{ display:block}

</style>

</head>

<body>

<div id="main">

<div id="title">

<a href="#tab1">tab1title</a>

<a href="#tab2">tab2title</a>

<a href="#tab3">tab3title</a>

<a href="#tab4">tab4title</a>

<div style="clear:both"></div>

</div>

<div id="content">

<div id="tab1"> tab1 content </div>

<div id="tab2"> tab2 content </div>

<div id="tab3"> tab3 content </div>

<div id="tab4"> tab4 content </div>

<div style="clear:both"></div>

</div>

</div>

</body>

</html>