html--大瓣花朵

作者：System 时间：2024年08月08日分类：所有,html 字数：910

HTML代码示例，用于创建一个简单的大麦花朵形状：




<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #D3D3D3;
}
.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.stalk {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background-color: #000;
  border-radius: 50% 50% 0 0;
}
.petal {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #FFD700;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(45deg);
  animation: rotatePetal 5s linear infinite;
}
@keyframes rotatePetal {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
</style>
</head>
<body>
 
<div class="container">
  <div class="stalk"></div>
  <div class="petal"></div>
</div>
 
</body>
</html>

这段代码使用了CSS样式来创建一个旋转的大麦花朵，其中.container是作为父容器，.stalk是大麦花朵的枝条，而.petal则是花朵本身，通过CSS动画rotatePetal实现旋转效果。

html--大瓣花朵

评论已关闭

推荐阅读