CSS模仿加速球
CSS模仿加速球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#tout, html, body {
width: 100%;
height: 100%;
}
#tout {
position: relative;
}
#tout:first-child div {
display: block;
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#tout:first-child>div>div {
width: 90px;
height: 90px;
border: 5px solid #fff;
border-radius: 50%;
margin: auto;
overflow: hidden;
}
#tout:first-child div div div {
width: 110px;
height: 110px;
margin: auto;
top: 360px;
background-color: #ddd;
border-radius: 0%;
border: none;
animation-name: anim, color;
animation-duration: 5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}
@keyframes anim{
100% { top:0 }
}
/* @keyframes color{
0% { background-color: green; }
25% { background-color: green; }
50% { background-color: red; }
75% { background-color: yellow; }
100% { background-color: blue; }
} */
</style>
</head>
<body>
<div id="tout">
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>.
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18