写一个可以生成满屏爱心的html代码
时间: 2023-03-10 20:04:26 浏览: 112
<div style="text-align: center;">
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
<span style="display: inline-block; width: 10px; height: 10px; background-color: #FF0000; border-radius: 50%;"></span>
</div><style>
.heart-container span{
position: absolute;
transform: rotate(45deg);
}
</style><div class="heart-container">
<span style="top: 0; left: 50%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 17%; left: 80%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 34%; left: 80%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 50%; left: 50%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 67%; left: 20%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 84%; left: 20%; background-color: #FF0000; border-radius: 50%;"></span>
<span style="top: 100%; left: 50%; background-color: #FF0000; border-radius: 50%;"></span>
</div>