CSS实现从上到下扫描效果

css代码如下

.scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 3px solid #3e88f1;
    -webkit-animation: scan 1.2s infinite;
    -moz-animation: scan 1.2s infinite;
    animation: scan 1.2s infinite;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#3e88f1));
    background: -webkit-linear-gradient(top, transparent, #3e88f1);
    background: -moz-linear-gradient(top, transparent, #3e88f1);
    background: linear-gradient(180deg, transparent, #3e88f1);
}

效果如下

你可能感兴趣的:(css3)