使用css动画让div元素移动到页面的每个角落 [英] Using css animation to make a div element move to each corner of the page
本文介绍了使用css动画让div元素移动到页面的每个角落的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使用css动画制作圆形div元素到页面的每个角落.我试图这样做无济于事.
I would like to know how to use css animation to make a circle div element go to each corner of the page. I have attempted to do this to no avail.
很基本的问题，但它会帮助我理解.
Quite a basic question, but It will help me to understand.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 201</title>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<style>
.box {
width: 300px;
height: 300px;
border: 10px solid black;
background-color: black;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: myAnimation 4s infinite alternate,myAnimation2 4s infinite alternate;
}
@keyframes myAnimation {
0% { top: 0; left: 0; }
30% { top: 3000px; }
68%, 72% { left: 50px; }
100% { top: 3000px; left: 90%; }
}
@keyframes myAnimation2{
0% { bottom: 0; right: 0; }
30% { top: 3000px; }
68%, 72% { left: 50px; }
100% { top: 3000px; left: 90%; }
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 推荐答案
使用背景更简单的想法，没有复杂的关键帧:
Easier idea using background with no complex keyframes:
.box {
background:
radial-gradient(farthest-side,black 97%,transparent)
top left/100px 100px /* simply adjust the values here to control the size of the circle */
no-repeat;
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
animation: move 4s infinite;
}
@keyframes move {
25% { background-position: bottom left }
50% { background-position: bottom right }
75% { background-position: top right }
}<div class="box"></div>这篇关于使用css动画让div元素移动到页面的每个角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
