html,
body
{
margin: ;
padding: ;
}
div
{
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;
}
div
{
/* 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 */
}
}
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);