CSS3案例1：雷达

<div class="radar"></div>

.radar{

    position: relative;

    width: calc(8em + 1.5em);

    height: calc(8em + 1.5em);

    font-size: 30px;

    background-color: black;

    background-image:

        linear-gradient(

            90deg,

            transparent 49.75%,

            darkgreen 49.75%,

            darkgreen 50.25%,

            transparent 50.25%

        ),

        linear-gradient(

            transparent 49.75%,

            darkgreen 49.75%,

            darkgreen 50.25%,

            transparent 50.25%

        ),

        repeating-radial-gradient(

            transparent 0,

            transparent 0.95em,

            darkgreen 0.95em,

            darkgreen 1em,

            transparent 1em

        );

    border-radius: 50%;

}

.radar::before{

    content:'';

    position: absolute;

    width: calc(8em/2);

    height: calc(8em/2);

    left:calc(1.5em/2);

    top:calc(1.5em/2);

    /*border:1px dashed white;*/

    background: linear-gradient(

        45deg,

        rgba(0, 0, 0, 0) 50%,

        rgba(0, 192, 0, 1) 100%

    );

    border-radius: 100% 0 0 0;

    animation: scaning 5s linear infinite;

    transform-origin: right bottom;

}

@keyframes scaning{

    to{

        transform: rotate(1turn);

    }

}

代码引用自《CSS艺术》