评论资讯 [ 总 841 则 ]
·悄然 - 2024-6-30 13:25
·飞飞 - 2024-6-29 18:28
·悄然 - 2024-6-29 18:27
·飞飞 - 2024-6-29 13:18
·悄然 - 2024-6-29 10:18
·知名不具 - 2024-6-28 22:54
·知名不具 - 2024-6-28 22:08
·知名不具 - 2024-6-28 22:07
·知名不具 - 2024-6-28 22:04
·知名不具 - 2024-6-28 22:04
·飞飞 - 2024-6-29 18:28
·悄然 - 2024-6-29 18:27
·飞飞 - 2024-6-29 13:18
·悄然 - 2024-6-29 10:18
·知名不具 - 2024-6-28 22:54
·知名不具 - 2024-6-28 22:08
·知名不具 - 2024-6-28 22:07
·知名不具 - 2024-6-28 22:04
·知名不具 - 2024-6-28 22:04
友情链接
网站统计
叶瓣效果
一、代码
<style> #wrap { margin: 20px auto; position: relative; width: 200px; height: 200px; animation: rot 6s linear infinite; } ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 0% 100%; background: linear-gradient(red, orange, green); transform-origin: 50% 100%; transform: rotate(var(--deg)); } @keyframes rot { to { transform: rotate(360deg); } } </style> <div id="wrap"></div> <script> let all = 5; Array.from({length: all}).forEach((item,key) => { item = document.createElement('ye-zi'); item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`; wrap.appendChild(item); }); </script>
二、效果
前一篇: 用CSS+HTML画一棵儿童画的树
下一篇: Promise处理音频自动播放实例
发表评论:
评论列表 [1条]
#1 | 知名不具 于 2024-2-16 21:21 发布: 对称的美,橘色尤其带点环的效果呢。