css3绘制扫描图片效果

html

css

.image{
	width: 400px;
	height: 400px;
	position: relative;
}
  .image .line {
	    z-index: 8;
	    position: absolute;
	    top: 1px;
        height: calc(100% - 2px);
        width: 100%;
        border-bottom: 3px solid #FFFFCC;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
    }
    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(0);
        }
    }