CSS3实现三角形不断放大效果纯CSS3+DIV实现小三角形边框效果的示例代码详解css如何利用 :before :after 写小三角形CSS3 画基本图形，圆形、椭圆形、三角形等用CSS3绘制三角形的简单方法布局和排版教程 纯css3实现图片三角形排列使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)

 html { height: 100%; } body { padding: 0; margin: 0; height: 100%; background: #642B73; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .wrapper { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .triangle-canvas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .triangle { fill: none; stroke: #fff; stroke-width: 15; -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: triangle-animation 10s linear infinite; animation: triangle-animation 10s linear infinite; } .triangle-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .triangle-2 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .triangle-3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .triangle-4 { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .triangle-5 { -webkit-animation-delay: -2s; animation-delay: -2s; } .triangle-6 { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; } .triangle-7 { -webkit-animation-delay: -3s; animation-delay: -3s; } .triangle-8 { -webkit-animation-delay: -3.5s; animation-delay: -3.5s; } .triangle-9 { -webkit-animation-delay: -4s; animation-delay: -4s; } .triangle-10 { -webkit-animation-delay: -4.5s; animation-delay: -4.5s; } .triangle-11 { -webkit-animation-delay: -5s; animation-delay: -5s; } .triangle-12 { -webkit-animation-delay: -5.5s; animation-delay: -5.5s; } .triangle-13 { -webkit-animation-delay: -6s; animation-delay: -6s; } .triangle-14 { -webkit-animation-delay: -6.5s; animation-delay: -6.5s; } .triangle-15 { -webkit-animation-delay: -7s; animation-delay: -7s; } .triangle-16 { -webkit-animation-delay: -7.5s; animation-delay: -7.5s; } .triangle-17 { -webkit-animation-delay: -8s; animation-delay: -8s; } .triangle-18 { -webkit-animation-delay: -8.5s; animation-delay: -8.5s; } .triangle-19 { -webkit-animation-delay: -9s; animation-delay: -9s; } .triangle-20 { -webkit-animation-delay: -9.5s; animation-delay: -9.5s; } @-webkit-keyframes triangle-animation { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); opacity: 1; } 100% { -webkit-transform: scale(3) rotate(45deg); transform: scale(3) rotate(45deg); opacity: 0; } } @keyframes triangle-animation { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); opacity: 1; } 100% { -webkit-transform: scale(3) rotate(45deg); transform: scale(3) rotate(45deg); opacity: 0; } }