css相关

1、动画完成时停止

animation-fill-mode:forwards;

2、进度条

html
<div class="progress-bar blue stripes">
      <span style="width: 100%"></span>
</div>


css

.progress-bar {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 6px;           
}

.progress-bar span {
    height:3px;
    display:block;
    background-color:#d7003a;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 5s 1;
    animation:progressbar 5s 1;
    animation-fill-mode:forwards;  
}
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
    from {
        width:0
    }
    to {
        width:100%
    }
}
@keyframes progressbar {
    from {
        width:0
    }
    to {
        width:100%
    }
}

 3、IE下透明

filter: alpha(opacity=30);

 

4、只有webkit内核的浏览器（chrome, opera, safari等）才支持，firefox到目前位置还不支持滚动条美化，IE浏览器只支持修改滚动条的颜色，其他的则无法修改

/* 设置垂直滚动条的宽度和水平滚动条的高度 */
.demo::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

/* 设置滚动条的滑轨 */
.demo::-webkit-scrollbar-track {
      background-color: #ddd;
}

/* 滑块 */
.demo::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

 /* 滑轨两头的监听按钮 */
.demo::-webkit-scrollbar-button {
    background-color: #888;
    display: none;
}

/* 横向滚动条和纵向滚动条相交处尖角 */
.demo::-webkit-scrollbar-corner {
    /*background-color: black;*/
}

 

5、三角箭头

// 朝上
width: 0;
height: 0;
font-size: 0;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #fff transparent;
border-width: 8px;