Spy Text

by Bacher

HTML

<div id="circle">
    <h1>text text text</h1>
</div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

CSS

#circle {
    position: absolute;
    top: 50px;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    border: 5px solid #e6795d;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    -webkit-animation: move-right 6s linear infinite alternate;
}

@-webkit-keyframes move-right {
    to { left: 300px; }
}

h1 {
    position: absolute;
    width: 300px;
    left: 0;
    color: azure;
    text-shadow: 0 0 8px black;
    font: bold 3em Arial;
    line-height: 90px;
    -webkit-animation: move-left 6s linear infinite alternate;
}

@-webkit-keyframes move-left {
    to { left: -300px; }
}