设为首页 头部信息

2022年02月12日整理发布：CSS3三角形如何实现不断放大

2023-07-30 14:29:13 来源:互联网

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

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

index.html代码


(资料图片仅供参考)

！DOCTYPE htmlhtml lang="en "

头

meta charset="UTF-8 "

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

链接rel="样式表href="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" />

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中文网其它相关文章！

来源：php中文网

最近更新

最新资讯