评论资讯 [ 总 428 则 ]
·悄然 - 2024-12-24 19:55
·小希 - 2024-12-24 19:51
·飞飞 - 2024-12-24 19:45
·悄然 - 2024-12-24 19:41
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·小希 - 2024-12-24 19:51
·飞飞 - 2024-12-24 19:45
·悄然 - 2024-12-24 19:41
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
友情链接
网站统计
js+css+svg花朵演示
以下代码,根据mdn svg 花朵示例简化而成:
<style> #sun_flower { background: beige; } .segment1, .segment2:hover { fill: url(#rGradient); stroke: orange; } .segment2, .segment1:hover { fill: orange; stroke: orange; } </style> <svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600"> <defs> <radialGradient id="rGradient" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%" stop -color="lightblue" stop-opacity="0.2" /> <stop offset="100%" stop-color="azure" stop-opacity="1" /> </radialGradient> </defs> </svg> <script> let gNum = 20; let ns = 'http://www.w3.org/2000/svg'; let path1 = '<path class="segment1" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />', path2 = '<path class="segment2" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />'; for(j = 0; j < gNum; j++) { let g1 = document.createElementNS(ns, 'g'), g2 = document.createElementNS(ns, 'g'); g1.setAttribute('transform', 'rotate(' + 360 / gNum * j + ')'); g1.innerHTML = path1; g2.setAttribute('transform', 'rotate(' + 360 / gNum * j + ') scale(0.33)'); g2.innerHTML = path2; sun_flower.appendChild(g1); sun_flower.appendChild(g2); } </script>
小结:内圆、外圆各由20片花瓣按一定角度旋转围成一圈而成,花瓣以渐变进行渲染,再藉由CSS的加持能产生一定的动态交互效果。
前一篇: 生成svg星形图案和路径
下一篇: 计算器演算动画
发表评论:
评论列表 [1条]
#1 | 了了 于 2023-11-12 16:05 发布: 鼠标移花瓣上,颜色会变。。好玩儿。。。