1、图片文字列表 (2016-01-25)
1.1 实现效果图如下：
1.2 代码：
html：( 代码十分优雅哦！ )
<ul>
<li class="step1">下载XXX应用</li>
<li class="step2">60秒在线申请</li>
<li class="step3">线下签约</li>
</ul>
css：
/*reset-style*/
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,
a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,
form,label,table,caption,tbody,tfoot,thead,tr,th,td {
;
;
}
body {
font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
background-color: #fff;
}
ol,ul {
list-style: none;
}
/*本页面的样式*/
ul li{display:inline-block;position:relative;text-align:center;margin:10px 60px;font-size:18px;}
ul li:before{width:184px;height:185px;display:block;margin-bottom:20px;}
ul .step1:before{content:url(ico1-c.jpg);}
ul .step2:before{content:url(ico2-c.jpg);}
ul .step3:before{content:url(ico3-c.jpg);}
ul li:after{content:url(threeStep.jpg);position:absolute;top:82px;left:195px;}
ul .step3:after{content:'';}
2、进度条效果 (2016-04-16)
2.1 效果图：
2.2 实现方法1：
html：
<div class="box">
<div class="progress">
<div style="width:60%">
<div class="percent"></div>
</div>
</div>
</div>
css：
;;}
.box{margin:20px 10px;}
.progress{width:200px;height:10px;border:1px solid #ccc;background:#eee;border-radius:5px;}
.percent{height:10px;background:maroon;border-radius:5px;animation:line 2s;-webkit-animation:line 2s;}
@keyframes line{
; }
to{ width : 100%; }
}
@-webkit-keyframes line{
; }
to{ width : 100%; }
}
2.3 实现方法2：
html：
<div id="process-box">
<div id="process-bar"></div>
<div id="process-txt">0%</div>
</div>
css：
;;}
#process-box{width:200px;height:15px;position:relative;border:1px solid #333;margin:20px;border-radius:20px;}
;;background:maroon;clip:rect(0px,0px,60px,0px);border-radius:20px;}
;;line-height:15px;text-align:center;color:#999;}
javascript：
var Obar = document.getElementById('process-bar'),
Otxt = document.getElementById('process-txt');
var process_txt = 0,
process_num = 0;
setInterval(function(){
if(process_num <= 200){
Obar.style.clip = 'rect(0px,' + process_num + 'px,60px,0px)';
Otxt.innerHTML = parseInt(process_num/200*100) + '%';
process_num ++;
}
return;
}, 10);
3、css实现简单的幻灯片效果 (2016-04-26)
html：
<div class="banner"></div>
css：
.banner{
width:400px;
height:250px;
margin:50px auto;
overflow:hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size:100% 100%;
-webkit-animation:loops 12s infinite;
}
@-webkit-keyframes loops{
0% {
background:url(banner1.jpg) no-repeat;
}
50% {
background:url(banner2.jpg) no-repeat;
}
100% {
background:url(banner3.jpg) no-repeat;
}
}
4、按钮样式 (2016-04-28)
html：
<a href="javascript:;" class="submit">报名</a> <a href="javascript:;" class="submit" disabled>已报名</a>
scss：
@charset 'utf-8';
@mixin btnFunc($width,$height,$bg,$fs,$color,$br){
width:$width;
height:$height;
background:$bg;
font-size:$fs;
color:$color;
border-radius:$br;
display:inline-block;
text-align:center;
line-height:$height;
}
.submit{
text-decoration:none;
@include btnFunc(120px,35px,#ff4a59,20px,#fff,5px);
&:active{
background:#d31928;
}
&[disabled]{
background:#b2b2b2;
}
}