<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3带动画效果的手风琴特效 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
<div class='left'>
<div class='left_inner'>
<h1>Funky Pure CSS Accordion</h1>
<h2>Go on, give it some clicks</h2>
<a class='download' href='http://www.moobnn.com/'>
<i class="icon ion-eye"></i> <span>网页模板</span>
</a>
<a class='follow' href='http://www.moobnn.com/jiaoben/'>
<i class="icon ion-social-codepen-outline"></i> <span>脚本代码</span>
</a>
</div>
</div>
<div class='right'>
<div class='app'>
<div class='app_inner'>
<input checked='' id='tab-1' name='buttons' type='radio'>
<label for='tab-1'>
<div class='app_inner__tab'>
<h2>
<i class='icon ion-android-alarm-clock'></i>
8am - 10am
</h2>
<div class='tab_left'>
<i class='big icon ion-android-color-palette'></i>
<div class='tab_left__image'>
<i class='icon ion-android-color-palette'></i>
</div>
</div>
<div class='tab_right'>
<h3>Jamie talks design</h3>
<h4>Monday - Thursday</h4>
<p>I talk a bunch of rubbish</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-2' name='buttons' type='radio'>
<label for='tab-2'>
<div class='app_inner__tab'>
<h2>
<i class='icon ion-android-alarm-clock'></i>
10am - 12am
</h2>
<div class='tab_left'>
<i class='big icon ion-music-note'></i>
<div class='tab_left__image'>
<i class='icon ion-music-note'></i>
</div>
</div>
<div class='tab_right'>
<h3>Arctic Monkeys Live</h3>
<h4>Monday - Wednesday</h4>
<p>Music for your lug holes</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-3' name='buttons' type='radio'>
<label for='tab-3'>
<div class='app_inner__tab'>
<h2>
<i class='icon ion-android-alarm-clock'></i>
12am - 4pm
</h2>
<div class='tab_left'>
<i class='big icon ion-android-microphone'></i>
<div class='tab_left__image'>
<i class='icon ion-android-microphone'></i>
</div>
</div>
<div class='tab_right'>
<h3>Steven Fry podcast</h3>
<h4>Staurday - Sunday</h4>
<p>Steven Fry says words</p>
<button>More information</button>
</div>
</div>
</label>
<input false='' id='tab-4' name='buttons' type='radio'>
<label for='tab-4'>
<div class='app_inner__tab'>
<h2>
<i class='icon ion-android-alarm-clock'></i>
4pm - 8pm
</h2>
<div class='tab_left'>
<i class='big icon ion-android-bar'></i>
<div class='tab_left__image'>
<i class='icon ion-android-bar'></i>
</div>
</div>
<div class='tab_right'>
<h3>Massive event</h3>
<h4>Monday - Friday</h4>
<p>Some kind of music festival</p>
<button>More information</button>
</div>
</div>
</label>
</div>
</div>
</div>
</body>
</html>
CSS3带动画效果的手风琴特效.zip
版权申诉
44 浏览量
2022-11-16
21:21:27
上传
评论
收藏 28KB ZIP 举报
CSS3带动画效果的手风琴特效.zip （8个子文件） 
CSS3带动画效果的手风琴特效 jiaoben3967 css 
default.css 6KB styles.css 9KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB
CSS3带动画效果的手风琴特效.jpg 37KB资源评论
