html--花瓣

代码

html 复制代码
<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Petals</title>



  <link rel="stylesheet" href="css/style.css">


</head>

<body>

  
<div class="mandala"> 
  <div class="flower">
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="whorl"></div>
  </div>
  <div class="flower">
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="whorl"></div>
  </div>
  <div class="flower">
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="whorl"></div>
  </div>
  <div class="flower">
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="petal"> </div>
    <div class="whorl"></div>
  </div>
</div>
  
  

</body>

</html>
相关推荐
豪气的程序猿7 小时前
电商素材工作流怎么搭?Lingko AI 对比宠物喂食器的主图与详情页分工
人工智能·宠物
AnalogElectronic9 小时前
家常菜抽奖转盘.html
html
志尊宝11 小时前
Vue3 零基础每日笔记(035):什么是 Composables——mixin 之死与逻辑复用新方案
笔记·vue·html·前端开发·软件开发
xy345312 小时前
Axure 9.0 中继器创建与设置步骤
前端·ui·html·axure·原型·产品设计
志尊宝13 小时前
Vue3 零基础每日笔记(030):动态组件与 keep-alive——切换组件与页面缓存
笔记·vue·html·前端开发·软件开发
志尊宝1 天前
Vue3 零基础每日笔记(026):emit 子传父——defineEmits 与事件校验
前端·javascript·html·vue3
IMPYLH1 天前
HTML 的 <section> 元素
前端·html
csuzhucong2 天前
混元一号、二号、三号
html
用户298698530142 天前
Python 将 HTML 转换为 Word 文档的实践指南
python·html·api
IMPYLH2 天前
HTML 的 <select> 元素
前端·html