CSS3三角形的基础绘制方法
要实现三角形的不断放大，首先需要掌握用CSS3绘制三角形的核心逻辑。原理是利用border的 transparent 特性，给一个宽高为0的元素设置不同方向的边框，将不需要显示方向的边框设为透明，就能得到对应方向的三角形。
下面是一个绘制向下三角形的基础代码示例：
/* 基础向下三角形样式 */
.triangle {
width: 0;
height: 0;
/* 上边框设置颜色和宽度，其余三边透明 */
border-top: 50px solid #ff5722;
border-right: 50px solid transparent;
border-bottom: 0 solid transparent;
border-left: 50px solid transparent;
}
实现三角形不断放大的核心思路
三角形绘制完成后，要实现不断放大的效果，需要结合两个CSS3属性：transform和animation。transform的scale函数可以对元素进行缩放，animation则可以定义动画的关键帧和执行规则，让缩放效果循环执行。
关键属性说明
- transform: scale(n)：n为缩放倍数，n大于1时元素放大，小于1时缩小
- @keyframes：定义动画的关键帧，指定不同时间点的样式变化
- animation：设置动画的名称、时长、循环次数等规则，infinite表示无限循环
完整实现代码
下面是完整的HTML和CSS代码，实现橙色三角形从原始大小不断放大再回到原始大小的循环效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3三角形不断放大动画</title>
<style>
/* 三角形基础样式 */
.scale-triangle {
width: 0;
height: 0;
border-top: 30px solid #ff5722;
border-right: 30px solid transparent;
border-bottom: 0 solid transparent;
border-left: 30px solid transparent;
/* 应用放大动画 */
animation: triangleScale 1.5s ease-in-out infinite;
/* 让三角形在页面居中显示 */
margin: 100px auto;
}
/* 定义放大动画关键帧 */
@keyframes triangleScale {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="scale-triangle"></div>
</body>
</html>
代码优化与注意事项
如果希望三角形的放大效果更流畅，可以调整animation的缓动函数，比如将ease-in-out替换为linear实现匀速放大缩小。另外需要注意，使用transform缩放不会影响页面的布局空间，相比修改width、height属性性能更好，更适合做动画效果。
如果需要改变三角形的颜色或者放大倍数，只需要修改对应的border颜色和keyframes里的scale数值即可，不需要调整其他核心逻辑。这种实现方式兼容性较好，支持所有现代浏览器，满足大部分日常开发需求。