直接上代码
最近捣鼓了个播放盒子更新了搜索新增播放全部歌曲新增添加播放歌曲bug过功能少，有能力者自己再改造下演示图：演示地址： 点击前往演示地址：blog.cenguigui.cn/player {hide}{cloud title="音乐播放器" type="lz" url="https://cenguigui.lanzouw.com/iyLAD1wknoij" password=""/}{/hide}
只需要加 中加入一行代码即可{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;/*蝴蝶边框*/ }
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); }
{message type="success" content="演示图："/}HTML代码 1 2 3 4 5 6 7 8 9 10 11 12 CSS代码：body { background-color: #dfdad4; height: 100vh; display: flex; align-items: center; justify-content: center; } .clock { position: relative; border-radius: 100%; box-shadow: 2px 10px 10px 10px rgba(0, 0, 0, 0.3), inset 2px 20px 10px 10px rgba(0, 0, 0, 0.3); } .wrap { width: 250px; height: 250px; border-radius: 100%; } .ringbit { position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: 0; bottom: 0; right: 0; top: 0; border-bottom: 20px solid white; } .ringbit:before { content: ""; position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: -15%; bottom: 0; right: 0; top: 5%; border-bottom: 20px solid rgba(0, 0, 0, 0.2); filter: blur(5px); z-index: -1; } .ring { position: absolute; width: 100%; height: 100%; border: 20px solid black; border-radius: 100%; box-sizing: border-box; border-left: 20px solid white; border-right: 20px solid white; } .light { position: absolute; width: 50px; height: 30px; top: 0; border-radius: 100%; background-color: white; box-shadow: 0 0 10px 5px white; } .lightray { position: absolute; width: 200px; height: 200px; top: 5%; border-radius: 50px; background-image: linear-gradient(45deg, transparent, transparent, white); transform: rotate(-45deg); } .panel { position: absolute; height: 180px; width: 180px; background-color: black; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; } .panel:after { content: "RAMESH"; position: absolute; top: 48px; left: 0; right: 0; bottom: 0; color: silver; font-size: 11px; text-align: center; } .string1, .string2, .string3 { position: absolute; width: 3px; height: 180px; border-top: 30px solid black; border-bottom: 30px solid black; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .string1 { transform: rotate(45deg); } .string2 { transform: rotate(135deg); } .string3 { transform: rotate(0deg); border-bottom: 200px solid black; border-top: 0; } .mynum { font-family: "verdana"; font-size: 1.2em; color: white; } .mynum span { width: 180px; height: 180px; position: absolute; margin: auto; } .mynum span:nth-child(1) { left: 160px; right: 0; top: 20px; bottom: 0; } .mynum span:nth-child(11) { left: 75px; right: 0; top: 20px; bottom: 0; } .mynum span:nth-child(12) { left: 113px; right: 0; top: 0; bottom: 0; } .mynum span:nth-child(2) { left: 190px; right: 0; top: 80px; bottom: 0; } .mynum span:nth-child(10) { left: 25px; right: 0; top: 80px; bottom: 0; } .mynum span:nth-child(3) { left: 200px; right: 0; top: 155px; bottom: 0; } .mynum span:nth-child(9) { left: 10px; right: 0; top: 155px; bottom: 0; } .mynum span:nth-child(4) { left: 188px; right: 0; top: 235px; bottom: 0; } .mynum span:nth-child(8) { left: 30px; right: 0; top: 235px; bottom: 0; } .mynum span:nth-child(5) { left: 160px; right: 0; top: 270px; bottom: 0; } .mynum span:nth-child(7) { left: 80px; right: 0; top: 270px; bottom: 0; } .mynum span:nth-child(6) { left: 120px; right: 0; top: 280px; bottom: 0; } .hour, .minute, .second { position: absolute; background-color: white; margin: auto; left: 0; right: 0; transform-origin: bottom center; } .hour { height: 50px; width: 5px; top: 75px; border-radius: 10px; } .minute { height: 65px; width: 3.5px; top: 60px; border-radius: 10px; } .second { height: 70px; width: 2px; top: 55px; border-radius: 3px; } .pin { position: absolute; width: 5px; height: 5px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: orange; border: 2px solid white; border-radius: 100%; } @keyframes myanim1 { to { transform: rotate(360deg); } }JS代码： var inc = 1000; myclock(); function myclock() { const mydate = new Date(); const hours = ((mydate.getHours() + 11) % 12) + 1; const minutes = mydate.getMinutes(); const seconds = mydate.getSeconds(); const hdegree = hours * 30; const mdegree = minutes * 6; const sdegree = seconds * 6; document.querySelector(".hour").style.transform = `rotate(${hdegree}deg)`; document.querySelector(".minute").style.transform = `rotate(${mdegree}deg)`; document.querySelector(".second").style.transform = `rotate(${sdegree}deg)`; } setInterval(myclock, inc);
本站同款返回顶部的代码touhou{message type="success" content="发现还挺可爱的，就分享出来吧"/}{alert type="info"}需要引入jQuery，网站有的就不用了，没有就引入 {/alert}HTML代码 CSS代码/*返回顶部*/ #BackToTop{ position: fixed; bottom: -400px; /* 初始时图片在底部之外，以隐藏起来 */ right: 0px; width: 100px; transition: bottom 0.5s; /* 添加过渡效果 */ }JQuery代码// 返回顶部 jQuery(function(){ // 点击查看原图 jQuery('.entry-content img').on('click', function(){ window.open(jQuery(this).attr('src')); }); // 链接在新标签页打开、nofollow jQuery('div[itemprop=articleBody] a').attr({'target':'_blank', 'rel':'nofollow'}); // 随机生成右下角东方返回顶部 var touhou = ['marisa', 'flandre', 'reimu']; i = Math.floor(Math.random()*touhou.length); jQuery('body').append(' '); jQuery('#rocket').remove(); jQuery('#BackToTop').on('click', function(){ jQuery('body,html').animate({ scrollTop: 0 }, 500); }); }); window.addEventListener('scroll', function() { var bottomRightImage = document.getElementById('BackToTop'); var scrollY = window.scrollY || window.pageYOffset; var halfPageHeight = document.body.scrollHeight / 6; if (scrollY >= halfPageHeight) { bottomRightImage.style.bottom = '0px'; // 滚动超过页面一半时显示图片 } else { bottomRightImage.style.bottom = '-400px'; // 其他情况下隐藏图片 } });