<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;padding: 0;
}
.box.yuan2{
width: 100px;
height: 100px;
border: #ff0000 solid 1px;
border-radius: 100px;
animation: yuan 1.5s infinite 1s;
position: absolute; /* 使用绝对定位脱离文档流 */
margin: 200px;
z-index: 2; /* 设置堆叠层级，越高越在上面显示 */
}
.box.yuan1{
width: 10px;
height: 10px;
/* border: #000000 solid 1px; */
background-color: #ff0000;
border-radius: 100px;
position: absolute;
top: 245px;
left: 245px;
z-index: 2;
}
.box.yuan4{
width: 100px;
height: 100px;
border: #000000 solid 1px;
border-radius: 100px;
animation: yuan 1.5s infinite 0.5s;
position: absolute;
margin: 300px;
z-index: 2;
}
.box.yuan3{
width: 10px;
height: 10px;
/* border: #000000 solid 1px; */
background-color: #ff0000;
border-radius: 100px;
position: absolute;
top: 345px;
left: 345px;
z-index: 2;
}
img {
width: 800px;
height: 400px;
position: absolute;
top: 100px;
z-index: 0;
}
@keyframes yuan{ /* 关键帧，从缩放0.1倍开始，到1.0倍结束 */
from{transform: scale(0.1);}
to{transform: scale(1.0);}
}
</style>
</head>
<body>
<div class="box yuan2"></div>
<div class="box yuan1"></div>
<div class="box yuan3"></div>
<div class="box yuan4"></div>
<img src="img/ditu.jpg" />
</body>
</html>
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
