html写一个99朵百合
时间: 2023-07-01 15:24:27 浏览: 60
下面是一个用 HTML 和 CSS 实现 99 朵百合的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>99朵百合</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.lily {
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 0 50% 50% 0;
transform: rotate(45deg);
animation: lily 5s linear infinite;
}
.lily:before,
.lily:after {
content: "";
position: absolute;
width: 20px;
height: 50px;
background-color: #f0e68c;
border-radius: 10px;
}
.lily:before {
top: 0;
left: 0;
transform: rotate(-45deg);
}
.lily:after {
top: 0;
right: 0;
transform: rotate(45deg);
}
@keyframes lily {
0% {
top: 0px;
left: 0px;
}
100% {
top: 200px;
left: 200px;
}
}
</style>
</head>
<body>
<!-- 生成99朵百合 -->
<?php
for ($i = 1; $i <= 99; $i++) {
echo '<div class="lily" style="animation-delay: '. ($i / 10) .'s;"></div>';
}
?>
</body>
</html>
```
在上面的代码中,我们使用 `div` 元素来表示每一朵百合,使用 `position: absolute` 来使它们可以放置到任意位置。我们使用 `background-color` 来设置白色的花瓣颜色,使用 `border-radius` 属性来设置花瓣的圆角。为了让花朵可以飘动,我们使用 `animation` 属性来设置一个名为 `lily` 的关键帧动画,并为每朵百合设置不同的延迟时间,使它们可以依次飘动。
为了让百合看起来更加真实,我们使用 `:before` 和 `:after` 伪元素来分别表示百合的左右两个花瓣,并使用 `background-color` 来设置金色的颜色。
最后,我们使用 PHP 的循环语句来生成 99 朵百合。
您可以将上面的代码保存成一个 PHP 文件,并通过浏览器打开,即可看到 99 朵百合飘动的效果。