当前位置：首页 > 下载站 > js特效 > CSS3特效 > CSS3的步骤流程查看动画特效

CSS3的步骤流程查看动画特效

分类: js特效 / CSS3特效	发布时间: 2017-12-28	访问量: 1245
下载量: 73

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

JavaScript ES5基础线上课程教学

PHP新手语法线上课程教学

4048 2025-06-12
支付宝沙箱支付（个人也能用的支付）

10106 2024-08-19
麻省理工大佬Python课程

13599 2024-05-31
Swoole5 Hyperf3 php8新版本协程框架讲说

15885 2024-05-13
【web前端】Node.js快速入门

10621 2024-04-26
国外Web开发全栈课程全集

10387 2024-04-24

CSS3的步骤流程查看动画特效

<body><script src="/demos/googlegg.js"></script>

<div class='progress'>
<div class='progress_inner'>
<div class='progress_inner__step'>
<label for='step-1'>Start order</label>
</div>
<div class='progress_inner__step'>
<label for='step-2'>Prepare gift</label>
</div>
<div class='progress_inner__step'>
<label for='step-3'>Pack gift</label>
</div>
<div class='progress_inner__step'>
<label for='step-4'>Decorate box</label>
</div>
<div class='progress_inner__step'>
<label for='step-5'>Send gift</label>
</div>
<input checked='checked' id='step-1' name='step' type='radio'>
<input id='step-2' name='step' type='radio'>
<input id='step-3' name='step' type='radio'>
<input id='step-4' name='step' type='radio'>
<input id='step-5' name='step' type='radio'>
<div class='progress_inner__bar'></div>
<div class='progress_inner__bar--set'></div>
<div class='progress_inner__tabs'>
<div class='tab tab-0'>
<h1>Start order</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
</div>
<div class='tab tab-1'>
<h1>Prepare gift</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
</div>
<div class='tab tab-2'>
<h1>Pack gift</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
</div>
<div class='tab tab-3'>
<h1>Decorate box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
</div>
<div class='tab tab-4'>
<h1>Send gift</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
</div>
</div>
<div class='progress_inner__status'>
<div class='box_base'></div>
<div class='box_lid'></div>
<div class='box_ribbon'></div>
<div class='box_bow'>
<div class='box_bow__left'></div>
<div class='box_bow__right'></div>
</div>
<div class='box_item'></div>
<div class='box_tag'></div>
<div class='box_string'></div>
</div>
</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>