使用纯CSS实现苹果系统的相册图标，可以借助多个旋转的圆形叠加并裁剪，形成类似彩色花瓣的效果。下面将分步解析实现原理，并提供完整的代码示例。
实现思路
苹果相册图标的核心是一个由多个彩色扇形或圆形组成的对称图形。我们可以用以下方法实现：
- 使用一个容器作为图标的背景（白色圆角矩形）；
- 在容器内放置多个带渐变的圆形元素，通过旋转角度组合成一个花朵形状；
- 利用CSS的
overflow: hidden控制显示区域； - 最后添加阴影和圆角模拟真实图标质感。
完整代码
下面是一个可直接运行的HTML文档，包含实现苹果风格相册图标的全部样式。所有HTML特殊字符已在代码块内正确转义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS苹果相册图标</title>
<style>
/* 容器：模拟App图标背景 */
.app-icon {
width: 160px;
height: 160px;
border-radius: 32px;
background: #ffffff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
margin: 50px auto;
}
/* 花朵容器：用于定位所有花瓣 */
.flower {
width: 120px;
height: 120px;
position: relative;
}
/* 通用花瓣样式：圆形渐变，绝对定位居中 */
.petal {
content: "";
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
}
/* 通过变换原点+旋转角度定位每个花瓣 */
.petal:nth-child(1) {
background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
transform: rotate(0deg) translateY(-30px);
}
.petal:nth-child(2) {
background: radial-gradient(circle at 30% 30%, #f39c12, #d35400);
transform: rotate(60deg) translateY(-30px);
}
.petal:nth-child(3) {
background: radial-gradient(circle at 30% 30%, #f1c40f, #f39c12);
transform: rotate(120deg) translateY(-30px);
}
.petal:nth-child(4) {
background: radial-gradient(circle at 30% 30%, #2ecc71, #27ae60);
transform: rotate(180deg) translateY(-30px);
}
.petal:nth-child(5) {
background: radial-gradient(circle at 30% 30%, #3498db, #2980b9);
transform: rotate(240deg) translateY(-30px);
}
.petal:nth-child(6) {
background: radial-gradient(circle at 30% 30%, #9b59b6, #8e44ad);
transform: rotate(300deg) translateY(-30px);
}
/* 中心小圆：增加立体感 */
.center {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%, #fff, #ddd);
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="app-icon">
<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="center"></div>
</div>
</div>
</body>
</html>关键点说明
- 花瓣定位：每个花瓣使用绝对定位并居中，通过
transform: rotate(角度) translateY(-30px)将花瓣从中心向上偏移，再旋转到对应角度，实现六个花瓣围绕中心均匀分布。 - 渐变颜色：每个花瓣使用
radial-gradient模拟高光和阴影，产生立体感。颜色组合参考了苹果照片应用的典型色调（红、橙、黄、绿、蓝、紫）。 - 圆角与阴影：外层容器设置
border-radius和box-shadow，模拟iOS图标圆角矩形的质感。 - 中心亮点：在花朵中心添加一个小圆形，使用径向渐变和高光，模拟花瓣汇聚的焦点。
效果预览
将以上代码保存为 .html 文件，用浏览器打开即可看到彩色的花瓣图标。你可以调整花瓣的大小、数量、颜色以及容器的圆角半径，来匹配不同设计需求。