* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.banner {
    background-color: aqua;
    height: 100hv;
    text-align: center;
    text-shadow: 2px 3px 2px #CCC;
    font-weight: 700;
    line-height: 100px;
    animation: change_background 15s infinite;
}


.frame {
    height: 300px;
    margin: 0px auto;
    width: 80%;
}

.frame div {
    float: left;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: aqua;
    font-size: 24px;
    line-height: 200px;
    color: yellow;
    text-align: center;
}

.pic {
    border: 5px solid red;
    animation: scroll 10s infinite;
}

.border2 {
    border: 10px dashed blue;
    border-radius: 0px 30px;
}

.border3 {
    border: 10px dotted magenta;
    border-radius: 30px 0px;
}

.rotate {
    background-color: teal;
    animation: rotate 10s infinite;
    border: 4px double yellow;
}

@keyframes change_background {
    0% {
        background-color: red;
        font-size: 1em;
    }

    25% {
        background-color: yellow;
        font-size: 1.5em;
    }

    50% {
        background-color: green;
        font-size: 2em;
    }

    75% {
        background-color: blue;
        font-size: 1.5em;
    }

    100% {
        background-color: sandybrown;
        font-size: 1em;
    }
}

@keyframes scroll {
    0% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/1.jpg);
    }

    20% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/2.jpg);
    }

    40% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/3.jpg);
    }

    60% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/4.jpg);
    }

    80% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/5.jpg);
    }

    100% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(/images/6.jpg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}