Ste*_*fan 6 html css css-animations
我想知道如何使用css动画使圆形div元素到达页面的每个角落。我试图这样做无济于事。
相当基本的问题，但它会帮助我理解。
<!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> 使用没有复杂关键帧的背景更简单的想法：
.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>| 归档时间： |
|
| 查看次数： |
106 次 |
| 最近记录： |