[k]优雅的css

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;
     }
 }