2022年02月12日发布CSS3三角形实现不断放大

大家好，今日小科来聊聊一篇关于2022年02月12日整理发布：CSS3三角形如何实现不断放大的文章，现在让我们往下看看吧！

CSS3三角形不断放大特效图片预览

index.html代码

！DOCTYPE htmlhtml lang='en '

头

meta charset='UTF-8 '

标题CSS3三角形不断放大特效/title

链接rel='样式表href='https://www.xhjyxxw.com/keji/202307/css/style.css '

/head

身体

p类="包装"

挽救（saving的简写）类='三角形-画布viewBox=' 0 0 1000 1000 ' xmlns=' http://www。w3。org/2000/SVG '

多边形类='三角形三角形-1 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-2 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-3 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-4 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-5 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-6 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-7 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-8 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-9 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-10 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-11 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-12 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-13 '点='500,200 759,650 241,650' /

多边形类='三角形三角形-14 '点='500,200

759,650 241,650" /><polygon points="500,200 759,650 241,650" /><polygon points="500,200 759,650 241,650" /><polygon points="500,200 759,650 241,650" /><polygon points="500,200 759,650 241,650" /><polygon points="500,200 759,650 241,650" /><polygon points="500,200 759,650 241,650" /></svg></p></body></html>

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

这篇好文章是转载于：知行礼动