音乐微信小程序-笒鬼鬼演示更多就不展示了，代码开源，写得屎各位勿喷，后期逻辑也是靠ai的ui是自己手搓{cloud title="音乐小程序" type="lz" url="https://cenguigui.lanzouw.com/iAtp43e3zuvc" password="guigui"/}
直接上代码
最近捣鼓了个播放盒子更新了搜索新增播放全部歌曲新增添加播放歌曲bug过功能少，有能力者自己再改造下演示图：演示地址： 点击前往演示地址：blog.cenguigui.cn/player {hide}{cloud title="音乐播放器" type="lz" url="https://cenguigui.lanzouw.com/iyLAD1wknoij" password=""/}{/hide}
音乐播放器样式更新最近更新了音乐播放器的样式有：小粉猫，小橘猫，小丑牛，哆啦A梦最新更新的小粉猫和小橘猫，很多人借鉴去，同时也包括明空皓月音乐播放器，也新增两个样式导致现在我不太想更新，还有两个不是很好看的：小丑牛和哆啦A梦，我不太想更新看看那天想更新了就更新，也可能不更新样式图如下：就这些，虽然不是很有技术含量，但是也是一份花费时间的作品嘛，素材和抠图也是需要花费小小时间的先有样式：要是小丑牛和哆啦A梦加上就是十七个样式啦，但是我现在不想更新，其实也谈不上更新，就是觉得视乎更新了没啥用只是想大家扒去还是咋的，能否给俺留个小小的版权，虽然不是很大的劳动成果，但是花费时间了对吧~笒鬼鬼音乐播放器(十五个样式任你选择)要是大家想自己搭建的，可以看看我的文章 玫曦音乐播放器(笒鬼鬼二开版)虽然美化有点丑，但是能用啊，从原先的2个样式，加了第3样式，毕竟免费的嘛，还有接口是给大家用的免费接口，也就是不支持会员歌曲的接口，毕竟开源的能用就行嘛对吧~
只需要加 中加入一行代码即可{callout color="#73aaff"} {/callout}代码结构：若不行引入本站，可以自己下载搭建{alert type="info"}源码下载地址：{/alert}{hide}https://cenguigui.lanzouw.com/iWfzv1sp5b4f{/hide}
{message type="success" content="演示地址："/}点我查看演示：网易播放器 https://music.cenguigui.cn/music/ {message type="success" content="下载地址："/}{hide}https://cenguigui.lanzouw.com/i76xL1sns9wh{/hide}
@-webkit-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-moz-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-ms-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-o-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-webkit-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-moz-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-ms-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-o-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } /**/ @-webkit-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-moz-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-ms-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-o-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-webkit-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-moz-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-ms-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-o-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-webkit-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-moz-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-ms-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-o-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } .scene3d { z-index:2; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: absolute; max-width: 100%; left: 50%; transform: translate(-50%); height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .skybox.cube { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotatingY 40s linear infinite; -moz-animation: rotatingY 40s linear infinite; -ms-animation: rotatingY 40s linear infinite; -o-animation: rotatingY 40s linear infinite; animation: rotatingY 40s linear infinite; } .skybox.cube var.scale { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -moz-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -ms-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -o-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); } .skybox.cube .face { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .skybox.cube .face.front { -webkit-transform: rotateY(0deg) translateZ(-256px); -moz-transform: rotateY(0deg) translateZ(-256px); -ms-transform: rotateY(0deg) translateZ(-256px); -o-transform: rotateY(0deg) translateZ(-256px); transform: rotateY(0deg) translateZ(-256px); background-image: url("clouds_front.jpg"); } .skybox.cube .face.back { -webkit-transform: rotateY(180deg) translateZ(-256px); -moz-transform: rotateY(180deg) translateZ(-256px); -ms-transform: rotateY(180deg) translateZ(-256px); -o-transform: rotateY(180deg) translateZ(-256px); transform: rotateY(180deg) translateZ(-256px); background-image: url("clouds_back.jpg"); } .skybox.cube .face.right { -webkit-transform: rotateY(-90deg) translateZ(-256px); -moz-transform: rotateY(-90deg) translateZ(-256px); -ms-transform: rotateY(-90deg) translateZ(-256px); -o-transform: rotateY(-90deg) translateZ(-256px); transform: rotateY(-90deg) translateZ(-256px); background-image: url("clouds_right.jpg"); } .skybox.cube .face.left { -webkit-transform: rotateY(90deg) translateZ(-256px); -moz-transform: rotateY(90deg) translateZ(-256px); -ms-transform: rotateY(90deg) translateZ(-256px); -o-transform: rotateY(90deg) translateZ(-256px); transform: rotateY(90deg) translateZ(-256px); background-image: url("clouds_left.jpg"); } .skybox.cube .face.top { -webkit-transform: rotateX(-90deg) translateZ(-256px); -moz-transform: rotateX(-90deg) translateZ(-256px); -ms-transform: rotateX(-90deg) translateZ(-256px); -o-transform: rotateX(-90deg) translateZ(-256px); transform: rotateX(-90deg) translateZ(-256px); background-image: url("clouds_top.jpg"); } .skybox.cube .face.bottom { -webkit-transform: rotateX(90deg) translateZ(-256px); -moz-transform: rotateX(90deg) translateZ(-256px); -ms-transform: rotateX(90deg) translateZ(-256px); -o-transform: rotateX(90deg) translateZ(-256px); transform: rotateX(90deg) translateZ(-256px); background-image: url("hazy_lake_top.jpg"); background: none; } .butterfly_container { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotatingY 10s linear infinite; -moz-animation: rotatingY 10s linear infinite; -ms-animation: rotatingY 10s linear infinite; -o-animation: rotatingY 10s linear infinite; animation: rotatingY 10s linear infinite; } .butterfly_container var { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .butterfly_container var.rotate3d { -webkit-transform: rotate3d(1, 0.5, 0, 70deg); -moz-transform: rotate3d(1, 0.5, 0, 70deg); -ms-transform: rotate3d(1, 0.5, 0, 70deg); -o-transform: rotate3d(1, 0.5, 0, 70deg); transform: rotate3d(1, 0.5, 0, 70deg); } .butterfly_container var.translate3d { -webkit-transform: translate3d(-300px, 0px, 0px); -moz-transform: translate3d(-300px, 0px, 0px); -ms-transform: translate3d(-300px, 0px, 0px); -o-transform: translate3d(-300px, 0px, 0px); transform: translate3d(-300px, 0px, 0px); } .butterfly_container var.translate3d-1 { -webkit-animation: fluttering 10s ease-in-out infinite; -moz-animation: fluttering 10s ease-in-out infinite; -ms-animation: fluttering 10s ease-in-out infinite; -o-animation: fluttering 10s ease-in-out infinite; animation: fluttering 10s ease-in-out infinite; } .butterfly_container.scale_half var.scale { -webkit-transform: scale3d(0.5, 0.5, 0.5); -moz-transform: scale3d(0.5, 0.5, 0.5); -ms-transform: scale3d(0.5, 0.5, 0.5); -o-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); } .butterfly_container.scale_third var.scale { -webkit-transform: scale3d(0.333, 0.333, 0.333); -moz-transform: scale3d(0.333, 0.333, 0.333); -ms-transform: scale3d(0.333, 0.333, 0.333); -o-transform: scale3d(0.333, 0.333, 0.333); transform: scale3d(0.333, 0.333, 0.333); } .butterfly_container.scale_quarter var.scale { -webkit-transform: scale3d(0.25, 0.25, 0.25); -moz-transform: scale3d(0.25, 0.25, 0.25); -ms-transform: scale3d(0.25, 0.25, 0.25); -o-transform: scale3d(0.25, 0.25, 0.25); transform: scale3d(0.25, 0.25, 0.25); } .butterfly_container figure.butterfly { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .butterfly_container figure.butterfly .wing { position: absolute; width: 50px; height: 100px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg); -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg); -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg); -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg); transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg); } .butterfly_container figure.butterfly .wing.right { -webkit-transform-origin: 50px 50px; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50px 50px; -o-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg); -moz-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg); -ms-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg); -o-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg); transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg); -webkit-animation: right-wing-flap 0.5s ease-in-out infinite; -moz-animation: right-wing-flap 0.5s ease-in-out infinite; -ms-animation: right-wing-flap 0.5s ease-in-out infinite; -o-animation: right-wing-flap 0.5s ease-in-out infinite; animation: right-wing-flap 0.5s ease-in-out infinite; filter: FlipH; -ms-filter: "FlipH"; } .butterfly_container figure.butterfly .wing.left { -webkit-transform-origin: 50px 50px; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50px 50px; -o-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-animation: left-wing-flap 0.5s ease-in-out infinite; -moz-animation: left-wing-flap 0.5s ease-in-out infinite; -ms-animation: left-wing-flap 0.5s ease-in-out infinite; -o-animation: left-wing-flap 0.5s ease-in-out infinite; animation: left-wing-flap 0.5s ease-in-out infinite; } .butterfly_container figure.butterfly .wing use { display: block; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /*fill: url(#image);*/ /*蝴蝶图片填充*/ /* fill:rgba(255,255,255,0.1);/*蝴蝶颜色填充*/ fill:rgba(255, 170, 255, 0.2);/*蝴蝶颜色填充*/ /* stroke: white;/*蝴蝶边框*/ stroke: pink;/*蝴蝶边框*/ }
JS代码：(function (window, document) { var Vector2 = (function () { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function (addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function () { function RainDrop(parent) { this.size = 2; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function () { this.life = 0; this.ttl = Math.random() * 500 + 300; this.position = new Vector2(Math.random() * window.innerWidth, 0); this.velocity = new Vector2( 0.5 - Math.random() * 1, Math.random() * 1 + 0.2 ); this.terminalVelocity = 8; }; RainDrop.prototype.update = function () { if ( this.position.x > window.innerWidth || this.position.x < -this.size || this.life > this.ttl ) this.init(); if (this.position.y > this.parent.floor) { this.position.y = this.parent.floor - this.size; this.velocity.y *= -0.2 - Math.random() * 0.2; } this.life++; this.position.add(this.velocity); this.velocity.y += 0.1; }; var Rain = (function () { function Rain(args) { this.props = args; this.rainDrops = []; this.init(); } return Rain; })(); Rain.prototype.init = function () { this.createCanvas(); this.resize(); this.loop(); }; Rain.prototype.resize = function () { var attr = "position: absolute; z-index: -99; top: 0; left: 0; height: 100vh; width: 100vw;"; this.canvas.setAttribute("style", attr); this.dimensions = { width: window.innerWidth, height: window.innerHeight }; this.canvas.width = this.dimensions.width; this.canvas.height = this.dimensions.height; this.floor = this.dimensions.height * 0.7; }; Rain.prototype.createCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); }; Rain.prototype.draw = function () { this.ctx.fillStyle = this.props.backgroundColor; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); for (var i = 0, len = this.rainDrops.length; i < len; i++) { var rainDrop = this.rainDrops[i]; rainDrop.update(); this.ctx.fillStyle = this.props.rainColor; this.ctx.fillRect( rainDrop.position.x, rainDrop.position.y, rainDrop.size, rainDrop.size ); } this.reflect(); }; Rain.prototype.reflect = function () { var grad = this.ctx.createLinearGradient( this.dimensions.width / 2, this.floor * 0.6, this.dimensions.width / 2, this.floor ); grad.addColorStop(0, "rgba(20,30,40,1)"); grad.addColorStop(1, "rgba(20,30,40,0)"); this.ctx.save(); this.ctx.scale(1, -1); this.ctx.translate(0, this.floor * -2); this.ctx.filter = "blur(2px) saturate(150%)"; this.ctx.drawImage( this.canvas, 0, 0, this.dimensions.width, this.floor, 0, 0, this.dimensions.width, this.floor ); this.ctx.fillStyle = grad; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); this.ctx.restore(); }; Rain.prototype.loop = function () { var timeout, self = this; if (self.rainDrops.length < self.props.rainDropCount) { timeout = window.setTimeout(function () { self.rainDrops.push(new RainDrop(self)); }, Math.random() * 200); } else if (timeout) { timeout = null; window.clearTimeout(timeout); } self.draw(); window.requestAnimationFrame(self.loop.bind(self)); }; window.onload = function () { var args = { rainDropCount: 500, rainColor: "rgba(150,180,255,0.8)", backgroundColor: "rgba(10,10,10,0.5)" }; var rain = new Rain(args); window.onresize = function () { rain.resize(); }; }; window.requestAnimationFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); })(this, document);
LOGO 首页 联系我们 关于我们 404 404 哦！看起来你迷路了！ 请返回主页！ i dare!
HTML代码 On Off CSS代码@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap"); :root { --highlight-left: 0; --pagination-width: 0; } html { height: 100%; } body { font-family: sans-serif; height: 100%; margin: 0; font-family: "Comfortaa", cursive; background-color: #eef3f7; user-select: none; display: flex; align-items: center; justify-content: center; } .radio-checked { position: relative; font-size: 34px; letter-spacing: 1px; box-shadow: -6px -5px 14px 3px #fff, 7px 7px 12px 2px #d0d8e3; border-radius: 70px; } .radio-checked_input { display: none; } .radio-checked_input:checked + .radio-checked_label--on { color: #47cf73; text-shadow: 0 0 7px rgba(71, 207, 115, 0.6); } .radio-checked_input:checked + .radio-checked_label--off { color: #ff3c41; text-shadow: 0 0 7px rgba(255, 60, 65, 0.6); } .radio-checked_input:checked + .radio-checked_label:before { display: none; } .radio-checked_label { cursor: pointer; display: inline-block; padding: 20px 25px 15px; line-height: 1; border-radius: 3rem; color: #acb2c0; transition: all 150ms ease-in-out; } .radio-checked_label:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; } .radio-checked_container { position: relative; } .radio-checked_highlight { position: absolute; left: 0; bottom: 0; width: var(--pagination-width); height: 100%; border-radius: 70px; box-shadow: inset -5px -5px 10px 4px #fff, inset -2px 6px 8px 6px #d0d8e3; background: #eef3f7; transition: all 0.6s ease; transform: translateX(var(--highlight-left)); } .svg { position: absolute; top: -50%; bottom: -50%; pointer-events: none; } .svg_icon { width: auto; height: 100%; } .svg--right { left: 100%; } .svg--left { right: 100%; }JS代码let root = document.documentElement; let color = ["#47cf73", "#7f71fe", "#1A3AF8", "#47cf73"]; var animateDur = "1.4s"; window.onload = function () { let activeChecked = document.querySelector( ".radio-checked_input:checked + .radio-checked_label" ); let left = activeChecked.offsetLeft; let width = activeChecked.offsetWidth; animation(left, width); }; document .querySelectorAll(".radio-checked_label") .forEach((t) => t.addEventListener("click", onChecked)); function onChecked(e) { let left = e.target.offsetLeft; let width = e.target.offsetWidth; animation(left, width); } var bool = true; function animation(left, width) { root.style.setProperty("--pagination-width", width + "px"); root.style.setProperty("--highlight-left", left + "px"); (bool = !bool) ? svgCreate("right") : svgCreate("left"); } function svgCreate(position) { let svgLeft = ` <path d="M110 50.4209L68.7302 25.4209" id="Line1"/> <path d="M110 59.498L45.9597 54.498" id="Line2"/> <path d="M110 70.4824L46.1323 87.4824" id="Line3"/> <path d="M110 79.3584L73.3484 113.358" id="Line4"/> <path d="M110 73.4473L34.2236 110.447" id="Line5"/> <path d="M110 64.499L24.0356 70.499" id="Line6"/> <path d="M110 54.4736L39.8398 31.4736" id="Line7"/> <path d="M110 56.4893L23.8953 38.4893" id="Line8"/> <path d="M110 67.4893L21.1013 85.4893" id="Line9"/> <path d="M110 85.2861L85.4102 118.286" id="Line10"/> <path d="M110 76.4111L50.2839 116.411" id="Line11"/> <path d="M110 61.4995L18.9907 59.4307" id="Line12"/> <g> <g> <g class="svg_obj"> <path d="M14.6324 5.25L20.9832 16.25C21.5606 17.25 20.8389 18.5 19.6842 18.5H6.98249C5.82778 18.5 5.10609 17.25 5.68344 16.25L12.0343 5.25C12.6116 4.25 14.055 4.25 14.6324 5.25Z" fill="none" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" stroke=` + color[Math.floor(Math.random() * 4)] + `></path> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 6 + 6) + `"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke=` + color[Math.floor(Math.random() * 4)] + `></circle> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 12 + 1) + `"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke=` + color[Math.floor(Math.random() * 4)] + `></circle> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 6 + 1) + `"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke=` + color[Math.floor(Math.random() * 4) + 1] + `></circle> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 12 + 1) + `"></mpath> </animateMotion> </g> </g> `; let svgRight = ` <path d="M20 54.6191L64.6763 20.6191" id="Line13"/> <path d="M20 56.5518L97.7788 20.5518" id="Line14"/> <path d="M20 58.5176L90.8684 40.5176" id="Line15"/> <path d="M20 63.5L111.989 61.5" id="Line16"/> <path d="M20 69.5029L100.053 77.5029" id="Line17"/> <path d="M20 73.5166L105.127 94.5166" id="Line18"/> <path d="M20 77.5479L91.2126 108.548" id="Line19"/> <path d="M20 80.6191L58.3235 108.619" id="Line20"/> <path d="M20 83.7598L42.4385 114.76" id="Line21"/> <path d="M20 66.5L98.0205 69.5" id="Line22"/> <path d="M20 60.5049L102.93 49.5049" id="Line23"/> <path d="M20 75.5303L83.1702 96.5303" id="Line24"/> <g> <g> <g class="svg_obj"> <path d="M14.6324 5.25L20.9832 16.25C21.5606 17.25 20.8389 18.5 19.6842 18.5H6.98249C5.82778 18.5 5.10609 17.25 5.68344 16.25L12.0343 5.25C12.6116 4.25 14.055 4.25 14.6324 5.25Z" fill="none" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" stroke="#d0d8e3"></path> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 12 + 13) + `"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <path d="M17.2394 3L7.6162 18.2116M5 5.51355L20.2116 15.1367" stroke="#ff3c41" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 12 + 13) + `"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <path d="M17.2394 3L7.6162 18.2116M5 5.51355L20.2116 15.1367" stroke="#acb2c0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </g> <animateMotion begin="0s" dur=` + animateDur + ` repeatCount="1"> <mpath xlink:href="#Line` + Math.floor(Math.random() * 12 + 13) + `"></mpath> </animateMotion> </g> </g> `; let span = document.createElement("span"); let radioChecked = document.querySelector(".radio-checked"); span.className = "svg svg--" + position; if (position === "left") { span.innerHTML = svgLeft; } else { span.innerHTML = svgRight; } setTimeout(function () { radioChecked.appendChild(span); }, 400); setTimeout(function () { span.remove(); }, 1500); }