CSS3三角形如何实现不断放大

PHP中文网 • 2025年3月10日 19:28:42 • 编程技术 • 阅读 2

本文给大家介绍css3三角形如何实现不断放大。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

CSS3三角形不断放大特效

图片预览

index.html代码

立即学习“前端免费学习笔记（深入）”；

nbsp;html>CSS3三角形不断放大特效

登录后复制

style.css代码

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;}}

登录后复制

推荐学习：css视频教程

以上就是CSS3三角形如何实现不断放大的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2877541.html