css3 js 做一个旋转音乐播放开关

 

我们经常会看到一些旋转音乐播放开关,今天我也写了一个分享出来,大家需要的话可以参考一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
    
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            background: transparent;
        }
        .music{
    
            margin: 100px auto;
            width: 28px;
            height: 28px;
            background-position: -185px 0px;
            animation: scroll 2s linear 0s infinite normal;
            -webkit-animation: scroll 2s linear 0s infinite normal;
            cursor: pointer;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPMAAADqCAYAAAB3L3NsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMjgxQ0NFRDVGMDhFNzExOTEwMEFBREI2RUY2MDhGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNzc2QUNFRjJBNkMxMUU3OTY5MDk4RTlCMTdFREI5NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNzc2QUNFRTJBNkMxMUU3OTY5MDk4RTlCMTdFREI5NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0REEzREYxMEEwMzExRTc4MTA4RkEwNjFCQjAzNDE3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0REEzREYyMEEwMzExRTc4MTA4RkEwNjFCQjAzNDE3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pJVdSgAAV2pJREFUeNrsfQeAHLX199Nsvd7P3ecK2MaYYsB0hwQ+WugpxEDooYSEloQ0wBBqwISEAAmhJTj8SSgGHCAQwAYChtCLbXDv9vV+W0ef3uzM3uysZkazu+c7Gz2Q93Z2RtJI+ukVPT2R4y66HCRJ2pHpiqvnzph3y7Uf2/3+3D3zHJ+/5/ZXCfs4hKVjWTqIpUksVek/t7G0kqW3WFrI0hssUbu8Lr7qcPjmxVe4ljkQ5frlUJC0o9Phz3a+9M6lP9z/hj/cvdbLcwxMCvs4i6Wfs7SZpX+x9DMdRG36bVU6yA5k6QaWRrJ0M0sPs6TmUt+BKleCWdIOSadePvfET7sCe+HfCxe31t+8rfZXu55306bpZfEPn7jz2gUCgBrPPh5n6VOWTmPpPRuOt419YPovS79lz81knxexdCFL32FpjUcgD1i5EsySdkgaG4I1577TcXqyUz0FqnywYGnPucGSnvdPLV32igCgZrOPf7J0GwLF5V7rJQTfuSz9hKV3WTqFpdcFgTyg5eYM5oNnHaxs+dUKnCGOVpN0li+gTDJ+IwT+Gywir7QEk/O3Hti4Qg49SYUm1JGvPv6U02/snHAK9DKpM0rhxePKzp13y8KPXUByJKrRLJ3B0j9cirmapfksbeD89lv9+sssHc/Svwe7XCWXhpzy6sijN/38y+VEIfNZOh2BHCrpnxcohYOivfSa0nbli4kLh/218YNVxXL4SSokzTj+lPC7/mkvBkvg/VePK91z8rjQizd/mbwLrzsAalf28YQupv5DsKg97H5govD/sY9v63nuOtjleubM0xaNuC4aUa8prgxq34PFPmL8xv7OuDfWm0Tr2+nfiMw+vPGt6Nckl97xqPzrx33z/5J7NOSTh9qeoIWoi1LpJyMImXow+eQv7OvSOQ2+34We+u2Cee9oI/porOvxU8cNZ6x5LQdQODj/xtKvWVrgodhv6wYqO2A9w/L+lZ73ASwlBctFkXtRLuWiCM4r1+8VyEB815TV+Ugg3A/cQMjHvT8QTmpAj0eSo+rjodfgrXoJ6B2IPvzaL+/ZtC12ERQnLahi3aoK4BPva0lAzfgQnTMiRHKtx/gyH7zZHIcn3++GqdOLF18xqqH1hj/cHfkYnswAZecrC5+7wV5j/r5udLrLY/FzdMD8xwHQdzFgTYeUhfoBwXInI0R0cbkg5QqDGUXrYFngWgSxAd5A2G8Cbj+gGXgzfo+HEhCPJkdNDPifmjTr4BlvLnlTlVAZ2uT/9nV/2bS051woVlKg1FgszQQqlw3TDCDPnFxE3zymgoQUJa/6/GZBL73wwPIfbXzkmrtv8Pisvp6Ly0Cn5VC0TxdnD9FBaUf3svR/rKwHQV8Pdin3fh3o39R16bzLtQXz8LfqJ9fEfHNiffTrRRWB8d/te7AX+mBFY9n4jvZxe1dsCo+drInW4UDWs+Zrde2rVlRu/aCjvmtNRXT91qkdjQe8Q+uPCMdj5OOW9T3/envkW8/U7z2xt1CDcNnTj6Lpv0IpqV6365HHtElYeqfuU66/btGHneeilTjNhfHTypHNwLXhyIUAMnl4G4wq8d+HQM4xi0NZ2gQ2y0AudD1LJ+qGJsxnpQ2XfJ8BapN+z2LBch/R9ehvQcrKnVe5fh6IyzqUB9GIBSU+KK31keIy5bP6Maun4e/1sJr9y2SZKNA36U9WdlbvNpmra21evmKXT58EBuCJ+D2qX6/4/O29YfjRCpDk7uXDwnOYPr0puSjxl6qrJ15fCI7N6n0N+/cstbcNG+Na4zoa4VrWvb2L6dZKyycQQqoopR9OOen0j+zy/+Kl56tob9uJ2v3FVQvME8byBfPPjiaS84I+34bzb713T+v74O9s/M9lQ719yklz9hiKQMb127MWdl6bBrJZrDYA7cSd8Vo3k8yYVP3xN0ogXyDvu7CN+uPxl/Z67daL88jmGJaez/FZdOWaq+u8T2OVWIrY3Pu8XtZiD+U+roP2DF2szrncjJaeuHDYaWiBRiCjdbqkOkiKK4Kwb+PLWZn4h/eR2SOun3zwiNvXhktDYE5j3/r7e3v9a/5kA8hWmhzetgJFdRTNfQFlFOrh265duRiBMlCDlAF5PwSqKb2mp6eNpKrqg/ibUz2qaneNImC1e3VQG7TbiXMeYkD+hFJ1+v0/u5AH1hlA1THQ7+UzpAgtwWe93fc0AjGLC5uBi9etHNr8PUrhztmVMKo0TPKpz5ProvS9tb1NPxuz7sQ8Xw29qN7Kx4anAwtBepHDfW/rxiiv5aLu38TSOfmU6zcDGZea8G8DyCnA+WH38a/sYwaxOZfqzR+MO3TMha3vxB7QOFzFgj9/MP7zZTO136BSmyxaoT2DQ1Wu/aCjeLcTNd26N8WzMc+Djmo/6513Pnh7T69iNxOtT2RsdTxjy68Rn1JHk0lks/sgJ2TgXMM47SImdn+s9rR+zUaQ+z0CMMWdFSf9BLBuLeuX/J
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值