<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body
{
margin: 0;
padding: 0;
}
div
{
font-size: 30px;
font-weight: bold;
position: fixed;
display: flex;
width: 200px;
height: 200px;
color: white;
border-radius: 50%;
background: red;
justify-content: center;
align-items: center;
}
div
{
-webkit-animation: rotate 5s linear infinite;
-moz-animation: rotate 5s linear infinite;
-o-animation: rotate 5s linear infinite;
animation: rotate 5s linear infinite;
}
@keyframes rotate
{
0%
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<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>
</body>
</html>