漂浮的广告位

<!-- run -->
<style>
  #ad{

            font-size: 30px;

            font-weight: bold;

            position: fixed;

            display: flex;

            width: 200px;

            height: 200px;

            color: white;

            border-radius: %;

            background: red;

            justify-content: center;

            align-items: center;
            z-index: 100000;

        }

        #ad{

            /* Firefox */

            -webkit-animation: rotate 5s linear infinite;

               -moz-animation: rotate 5s linear infinite;

            /* Safari 和 Chrome */

                 -o-animation: rotate 5s linear infinite;

                    animation: rotate 5s linear infinite;

            /* Opera */

        }

        @keyframes rotate

        {

            %

            {

                /* Firefox */

                -webkit-transform: rotate(0deg);

                /* IE 9 */

                   -moz-transform: rotate(0deg);

                    -ms-transform: rotate(0deg);

                /* Safari 和 Chrome */

                     -o-transform: rotate(0deg);

                        transform: rotate(0deg);

                /* Opera */

            }

            %

            {

                /* Firefox */

                -webkit-transform: rotate(360deg);

                /* IE 9 */

                   -moz-transform: rotate(360deg);

                    -ms-transform: rotate(360deg);

                /* Safari 和 Chrome */

                     -o-transform: rotate(360deg);

                        transform: rotate(360deg);

                /* Opera */

            }

        }
</style>
 <div id="ad">Hello, world!</div>
<script type="text/javascript">
    let el = document.querySelector('#ad');
    let styleTop = 0;
    let styleLeft = 0;
    let verticalFlag = true;
    let horizontalFlag = true;
    setInterval(() => {
      (el.offsetHeight + styleTop === window.innerHeight) && (verticalFlag = false);
      (el.offsetWidth + styleLeft === window.innerWidth) && (horizontalFlag = false);
      verticalFlag ? styleTop++ : styleTop--;
      horizontalFlag ? styleLeft++ : styleLeft--;
      (styleTop <= 0) && (verticalFlag = true);
      (styleLeft <= 0) && (horizontalFlag = true);
      el.style.top = `${styleTop}px`;
      el.style.left = `${styleLeft}px`;
    }, 10);
</script>