├── README.md ├── index.html ├── picture ├── bd.png ├── bgc.gif ├── biying.png ├── github.png ├── google.png ├── v2ex.jpg └── zhihu.png ├── 自定义右键菜单.css ├── 自定义右键菜单.css.map ├── 自定义右键菜单.js └── 自定义右键菜单.scss /README.md: -------------------------------------------------------------------------------- 1 | # 一个自定义的右键弹出菜单(旋转太极) 2 | 使用了之前的css小作品,没有太多的代码,部分细节需要注意,例如focus事件和blur事件 3 | [效果展示页面](https://htmlpreview.github.io/?https://github.com/L-WJ1995/contextmenu/blob/master/index.html) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 自定义右键菜单 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /picture/bd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/bd.png -------------------------------------------------------------------------------- /picture/bgc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/bgc.gif -------------------------------------------------------------------------------- /picture/biying.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/biying.png -------------------------------------------------------------------------------- /picture/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/github.png -------------------------------------------------------------------------------- /picture/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/google.png -------------------------------------------------------------------------------- /picture/v2ex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/v2ex.jpg -------------------------------------------------------------------------------- /picture/zhihu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/zhihu.png -------------------------------------------------------------------------------- /自定义右键菜单.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; } 5 | 6 | html, 7 | body { 8 | padding: 0 2px; } 9 | 10 | #Mycontextmenu { 11 | outline: none; 12 | position: fixed; 13 | overflow: hidden; 14 | visibility: hidden; 15 | text-align: center; 16 | border: 5px solid; 17 | width: 0px; 18 | height: 0px; 19 | border-radius: 150px; 20 | margin: -10px 0 0 10px; 21 | color: white; 22 | transition: width 1s,height 1s; 23 | background-image: url(./picture/bgc.gif); 24 | background-repeat: no-repeat; 25 | background-position: center; 26 | animation: a 2s .1s linear infinite; 27 | box-shadow: 0 0 5px 1px black; } 28 | #Mycontextmenu span { 29 | position: absolute; 30 | width: 173.205px; 31 | height: 150px; 32 | margin-left: -86.6025px; 33 | margin-top: -75px; 34 | left: 50%; 35 | top: 25%; 36 | line-height: 150px; 37 | clip-path: polygon(0 0, 50% 100%, 100% 0); 38 | transform-origin: 50% 100%; 39 | transition: background-color 1s 0s; } 40 | #Mycontextmenu span:nth-of-type(1) { 41 | transform: rotate(0deg); } 42 | #Mycontextmenu span:nth-of-type(2) { 43 | transform: rotate(60.5deg); } 44 | #Mycontextmenu span:nth-of-type(3) { 45 | transform: rotate(121deg); } 46 | #Mycontextmenu span:nth-of-type(4) { 47 | transform: rotate(181.5deg); } 48 | #Mycontextmenu span:nth-of-type(5) { 49 | transform: rotate(242deg); } 50 | #Mycontextmenu span:nth-of-type(6) { 51 | transform: rotate(302.5deg); } 52 | #Mycontextmenu span:nth-of-type(7) { 53 | width: 20px; 54 | height: 20px; 55 | margin: -10px 0 0 -10px; 56 | left: 50%; 57 | top: 50%; 58 | background-color: black; 59 | clip-path: none; 60 | border-radius: 10px; } 61 | #Mycontextmenu span:nth-of-type(7):before { 62 | content: ""; 63 | pointer-events: none; 64 | display: block; 65 | position: absolute; 66 | width: 10px; 67 | height: 5px; 68 | margin: -2.5px 0 0 0; 69 | border-radius: 10px; 70 | background-color: black; 71 | top: 50%; 72 | left: 50%; 73 | transform-origin: 0 50%; 74 | transition: transform 1s, width 1s,background-color 1s; 75 | z-index: -20; } 76 | #Mycontextmenu span:nth-of-type(1):hover { 77 | background-color: rgba(0, 0, 0, 0.3); 78 | transition: 1s; 79 | z-index: -30; } 80 | #Mycontextmenu span:nth-of-type(1):hover ~ span:nth-of-type(7) { 81 | transition: background-color 1s; } 82 | #Mycontextmenu span:nth-of-type(1):hover ~ span:nth-of-type(7):before { 83 | width: 100px; 84 | background-color: white; 85 | transform: rotate(-90deg); 86 | transition: transform 1s, width 1s,background-color 1s; } 87 | #Mycontextmenu span:nth-of-type(2):hover { 88 | background-color: rgba(0, 0, 0, 0.3); 89 | transition: 1s; 90 | z-index: -30; } 91 | #Mycontextmenu span:nth-of-type(2):hover ~ span:nth-of-type(7) { 92 | transition: background-color 1s; } 93 | #Mycontextmenu span:nth-of-type(2):hover ~ span:nth-of-type(7):before { 94 | width: 100px; 95 | background-color: white; 96 | transform: rotate(-30deg); 97 | transition: transform 1s, width 1s,background-color 1s; } 98 | #Mycontextmenu span:nth-of-type(3):hover { 99 | background-color: rgba(0, 0, 0, 0.3); 100 | transition: 1s; 101 | z-index: -30; } 102 | #Mycontextmenu span:nth-of-type(3):hover ~ span:nth-of-type(7) { 103 | transition: background-color 1s; } 104 | #Mycontextmenu span:nth-of-type(3):hover ~ span:nth-of-type(7):before { 105 | width: 100px; 106 | background-color: white; 107 | transform: rotate(30deg); 108 | transition: transform 1s, width 1s,background-color 1s; } 109 | #Mycontextmenu span:nth-of-type(4):hover { 110 | background-color: rgba(0, 0, 0, 0.3); 111 | transition: 1s; 112 | z-index: -30; } 113 | #Mycontextmenu span:nth-of-type(4):hover ~ span:nth-of-type(7) { 114 | transition: background-color 1s; } 115 | #Mycontextmenu span:nth-of-type(4):hover ~ span:nth-of-type(7):before { 116 | width: 100px; 117 | background-color: white; 118 | transform: rotate(90deg); 119 | transition: transform 1s, width 1s,background-color 1s; } 120 | #Mycontextmenu span:nth-of-type(5):hover { 121 | background-color: rgba(0, 0, 0, 0.3); 122 | transition: 1s; 123 | z-index: -30; } 124 | #Mycontextmenu span:nth-of-type(5):hover ~ span:nth-of-type(7) { 125 | transition: background-color 1s; } 126 | #Mycontextmenu span:nth-of-type(5):hover ~ span:nth-of-type(7):before { 127 | width: 100px; 128 | background-color: white; 129 | transform: rotate(150deg); 130 | transition: transform 1s, width 1s,background-color 1s; } 131 | #Mycontextmenu span:nth-of-type(6):hover { 132 | background-color: rgba(0, 0, 0, 0.3); 133 | transition: 1s; 134 | z-index: -30; } 135 | #Mycontextmenu span:nth-of-type(6):hover ~ span:nth-of-type(7) { 136 | transition: background-color 1s; } 137 | #Mycontextmenu span:nth-of-type(6):hover ~ span:nth-of-type(7):before { 138 | width: 100px; 139 | background-color: white; 140 | transform: rotate(210deg); 141 | transition: transform 1s, width 1s,background-color 1s; } 142 | #Mycontextmenu span:nth-of-type(1):hover, #Mycontextmenu span:nth-of-type(2):hover, #Mycontextmenu span:nth-of-type(6):hover { 143 | line-height: 70px; } 144 | #Mycontextmenu span:nth-of-type(3):hover, #Mycontextmenu span:nth-of-type(4):hover, #Mycontextmenu span:nth-of-type(5):hover { 145 | line-height: 85px; } 146 | #Mycontextmenu > div { 147 | overflow: hidden; 148 | position: absolute; 149 | height: 100%; 150 | width: 50%; 151 | top: 0; 152 | clip-path: none; 153 | z-index: 2; 154 | transition: left 3s; } 155 | #Mycontextmenu > div:nth-of-type(1) { 156 | left: 0%; 157 | background-color: black; } 158 | #Mycontextmenu > div:nth-of-type(1)::before { 159 | content: ""; 160 | position: absolute; 161 | width: 100%; 162 | height: 50%; 163 | background-color: white; 164 | top: 0; 165 | right: -50%; 166 | border-radius: 50%; } 167 | #Mycontextmenu > div:nth-of-type(1):after { 168 | content: ""; 169 | position: absolute; 170 | width: 25%; 171 | height: 12.5%; 172 | background-color: black; 173 | top: 56.25px; 174 | right: -12.5%; 175 | border-radius: 50%; } 176 | #Mycontextmenu > div:nth-of-type(1) > div { 177 | position: absolute; 178 | width: 25%; 179 | height: 12.5%; 180 | background-color: white; 181 | bottom: 56.25px; 182 | right: -12.5%; 183 | border-radius: 50%; } 184 | #Mycontextmenu > div:nth-of-type(2) { 185 | left: 50%; 186 | background-color: white; } 187 | #Mycontextmenu > div:nth-of-type(2):before { 188 | content: ""; 189 | position: absolute; 190 | width: 100%; 191 | height: 50%; 192 | background-color: black; 193 | bottom: 0; 194 | left: -50%; 195 | border-radius: 50%; } 196 | #Mycontextmenu > div:nth-of-type(2):after { 197 | content: ""; 198 | position: absolute; 199 | width: 25%; 200 | height: 12.5%; 201 | background-color: white; 202 | bottom: 56.25px; 203 | left: -12.5%; 204 | border-radius: 50%; } 205 | #Mycontextmenu > div:nth-of-type(2) > div { 206 | position: absolute; 207 | width: 25%; 208 | height: 12.5%; 209 | background-color: black; 210 | top: 56.25px; 211 | left: -12.5%; 212 | border-radius: 50%; } 213 | #Mycontextmenu:focus { 214 | animation: 0s; } 215 | #Mycontextmenu:focus > div:nth-of-type(1) { 216 | left: -100%; 217 | transition: left 3s; } 218 | #Mycontextmenu:focus > div:nth-of-type(2) { 219 | left: 150%; 220 | transition: left 3s; } 221 | 222 | a { 223 | width: 25%; 224 | height: 25%; 225 | display: inline-block; 226 | background-size: 100%; 227 | background-repeat: no-repeat; 228 | background-position: center; 229 | border-radius: 100%; } 230 | 231 | span:nth-of-type(1) a { 232 | background-image: url(./picture/google.png); } 233 | 234 | span:nth-of-type(2) a { 235 | position: relative; 236 | left: -3.9px; 237 | background-image: url(./picture/biying.png); } 238 | 239 | span:nth-of-type(3) a { 240 | position: relative; 241 | left: -3.9px; 242 | background-image: url(./picture/bd.png); } 243 | 244 | span:nth-of-type(4) a { 245 | position: relative; 246 | left: -1.5px; 247 | background-image: url(./picture/github.png); } 248 | 249 | span:nth-of-type(5) a { 250 | position: relative; 251 | left: .5px; 252 | background-image: url(./picture/v2ex.jpg); } 253 | 254 | span:nth-of-type(6) a { 255 | position: relative; 256 | left: -0.5px; 257 | background-image: url(./picture/zhihu.png); } 258 | 259 | @keyframes a { 260 | from { 261 | transform: rotate(0deg); } 262 | to { 263 | transform: rotate(-360deg); } } 264 | 265 | /*# sourceMappingURL=%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.css.map */ 266 | -------------------------------------------------------------------------------- /自定义右键菜单.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,CAAE;EACE,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGd;IACK;EACD,OAAO,EAAE,KAAK;;AAGlB,cAAe;EACX,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,KAAK;EACf,QAAQ,EAAE,MAAM;EAChB,UAAU,EAAC,MAAM;EACjB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,KAAK;EACpB,MAAM,EAAE,cAAc;EACtB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,kBAAkB;EAC9B,gBAAgB,EAAE,sBAAsB;EACxC,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,SAAS,EAAE,wBAAwB;EACnC,UAAU,EAAE,iBAAiB;EAC7B,mBAAK;IACD,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,KAAK;IACb,WAAW,EAAE,UAAU;IACvB,UAAU,EAAC,KAAK;IAChB,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,GAAG;IACR,WAAW,EAAE,KAAK;IAClB,SAAS,EAAE,8BAA8B;IACzC,gBAAgB,EAAE,QAAQ;IAC1B,UAAU,EAAE,sBAAsB;IAE9B,kCAAqB;MACjB,SAAS,EAAE,YAA8B;IAD7C,kCAAqB;MACjB,SAAS,EAAE,eAA8B;IAD7C,kCAAqB;MACjB,SAAS,EAAE,cAA8B;IAD7C,kCAAqB;MACjB,SAAS,EAAE,gBAA8B;IAD7C,kCAAqB;MACjB,SAAS,EAAE,cAA8B;IAD7C,kCAAqB;MACjB,SAAS,EAAE,gBAA8B;IAGjD,kCAAiB;MACb,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,MAAM,EAAE,eAAe;MACvB,IAAI,EAAE,GAAG;MACT,GAAG,EAAE,GAAG;MACR,gBAAgB,EAAE,KAAK;MACvB,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;MACnB,yCAAS;QACL,OAAO,EAAE,EAAE;QACX,cAAc,EAAC,IAAI;QACnB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,YAAY;QACpB,aAAa,EAAE,IAAI;QACnB,gBAAgB,EAAE,KAAK;QACvB,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,gBAAgB,EAAE,KAAK;QACvB,UAAU,EAAE,0CAA0C;QACtD,OAAO,EAAE,GAAG;IAKhB,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,cAA8B;UACzC,UAAU,EAAE,0CAA0C;IAVlE,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,cAA8B;UACzC,UAAU,EAAE,0CAA0C;IAVlE,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,aAA8B;UACzC,UAAU,EAAE,0CAA0C;IAVlE,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,aAA8B;UACzC,UAAU,EAAE,0CAA0C;IAVlE,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,cAA8B;UACzC,UAAU,EAAE,0CAA0C;IAVlE,wCAA2B;MACvB,gBAAgB,EAAE,kBAAkB;MACpC,UAAU,EAAE,EAAE;MACd,OAAO,EAAE,GAAG;MACZ,8DAAqB;QACjB,UAAU,EAAE,mBAAmB;QAC/B,qEAAS;UACL,KAAK,EAAE,KAAK;UACZ,gBAAgB,EAAE,KAAK;UACvB,SAAS,EAAE,cAA8B;UACzC,UAAU,EAAE,0CAA0C;IAKtE,4HAEuB;MACnB,WAAW,EAAE,IAAI;IAErB,4HAEuB;MACnB,WAAW,EAAE,IAAI;EAGzB,oBAAK;IACD,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,GAAG;IACV,GAAG,EAAE,CAAC;IACN,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,OAAQ;IACpB,mCAAiB;MACb,IAAI,EAAE,EAAE;MACR,gBAAgB,EAAE,KAAK;MACvB,2CAAU;QACN,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,gBAAgB,EAAE,KAAK;QACvB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,GAAG;MAEtB,yCAAQ;QACJ,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,KAAK;QACb,gBAAgB,EAAE,KAAK;QACvB,GAAG,EAAE,OAAO;QACZ,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,GAAG;MAEtB,yCAAK;QACD,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,KAAK;QACb,gBAAgB,EAAE,KAAK;QACvB,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,GAAG;IAG1B,mCAAiB;MACb,IAAI,EAAE,GAAG;MACT,gBAAgB,EAAE,KAAK;MACvB,0CAAS;QACL,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,gBAAgB,EAAE,KAAK;QACvB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,IAAI;QACV,aAAa,EAAE,GAAG;MAEtB,yCAAQ;QACJ,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,KAAK;QACb,gBAAgB,EAAE,KAAK;QACvB,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,MAAM;QACZ,aAAa,EAAE,GAAG;MAEtB,yCAAK;QACD,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,KAAK;QACb,gBAAgB,EAAE,KAAK;QACvB,GAAG,EAAE,OAAO;QACZ,IAAI,EAAE,MAAM;QACZ,aAAa,EAAE,GAAG;EAK9B,oBAAQ;IACJ,SAAS,EAAE,EAAE;IACb,yCAAoB;MAChB,IAAI,EAAE,KAAK;MACX,UAAU,EAAE,OAAO;IAEvB,yCAAoB;MAChB,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,OAAO;;AAM/B,CAAC;EACC,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,YAAY;EACrB,eAAe,EAAE,IAAI;EACrB,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAC,MAAM;EAC1B,aAAa,EAAE,IAAI;;AAErB,qBAAqB;EACnB,gBAAgB,EAAE,yBAAyB;;AAE7C,qBAAqB;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAC,MAAM;EACX,gBAAgB,EAAE,yBAAyB;;AAE7C,qBAAqB;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAC,MAAM;EACX,gBAAgB,EAAE,qBAAqB;;AAEzC,qBAAqB;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAC,MAAM;EACX,gBAAgB,EAAE,yBAAyB;;AAE7C,qBAAqB;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAC,IAAI;EACT,gBAAgB,EAAE,uBAAuB;;AAE3C,qBAAqB;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAC,MAAM;EACX,gBAAgB,EAAE,wBAAwB;;AAG5C,YAOC;EANG,IAAK;IACD,SAAS,EAAE,YAAY;EAE3B,EAAG;IACC,SAAS,EAAE,eAAe", 4 | "sources": ["%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.scss"], 5 | "names": [], 6 | "file": "%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.css" 7 | } -------------------------------------------------------------------------------- /自定义右键菜单.js: -------------------------------------------------------------------------------- 1 | let node = document.querySelector("#Mycontextmenu") 2 | addEventListener("mouseup", function(e){ 3 | document.oncontextmenu = ()=>false 4 | let x = e.clientX + document.documentElement.scrollLeft 5 | let y = e.clientY + document.documentElement.scrollTop 6 | if (e.button !== 2) { 7 | if (node.style.visibility === "visible" && !is_Inmenu(x,y,node)) { 8 | node.setAttribute("style","visibility:hidden;width:0px;height:0px;") 9 | } 10 | } else { 11 | if (!is_Inmenu(x,y,node)) { 12 | let x = e.clientX - 160 13 | let y = e.clientY - 150 + 10 14 | node.setAttribute("style",`visibility:visible;left:${x}px;top:${y}px;width:300px;height:300px;`) 15 | } 16 | } 17 | }) 18 | 19 | function is_Inmenu(x,y,node){ 20 | return x > node.getBoundingClientRect().left + document.documentElement.scrollLeft && 21 | x < node.getBoundingClientRect().right + document.documentElement.scrollLeft && 22 | y > node.getBoundingClientRect().top + document.documentElement.scrollTop && 23 | y < node.getBoundingClientRect().bottom + document.documentElement.scrollTop 24 | ? true : false 25 | } 26 | 27 | 28 | -------------------------------------------------------------------------------- /自定义右键菜单.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html, 8 | body { 9 | padding: 0 2px; 10 | } 11 | 12 | #Mycontextmenu { 13 | outline: none; 14 | position: fixed; 15 | overflow: hidden; 16 | visibility:hidden; 17 | text-align: center; 18 | border: 5px solid; 19 | width: 0px; 20 | height: 0px; 21 | border-radius: 150px; 22 | margin: -10px 0 0 10px; 23 | color: white; 24 | transition: width 1s,height 1s; 25 | background-image: url(./picture/bgc.gif); 26 | background-repeat: no-repeat; 27 | background-position: center; 28 | animation: a 2s .1s linear infinite; 29 | box-shadow: 0 0 5px 1px black; 30 | span { 31 | position: absolute; 32 | width: 173.205px; 33 | height: 150px; 34 | margin-left: -86.6025px; 35 | margin-top:-75px; 36 | left: 50%; 37 | top: 25%; 38 | line-height: 150px; 39 | clip-path: polygon(0 0, 50% 100%, 100% 0); 40 | transform-origin: 50% 100%; 41 | transition: background-color 1s 0s; 42 | @for $i from 1 to 7 { 43 | &:nth-of-type(#{$i}) { 44 | transform: rotate(0deg + ($i - 1) * 60.5); 45 | } 46 | } 47 | &:nth-of-type(7) { 48 | width: 20px; 49 | height: 20px; 50 | margin: -10px 0 0 -10px; 51 | left: 50%; 52 | top: 50%; 53 | background-color: black; 54 | clip-path: none; 55 | border-radius: 10px; 56 | &:before { 57 | content: ""; 58 | pointer-events:none; 59 | display: block; 60 | position: absolute; 61 | width: 10px; 62 | height: 5px; 63 | margin: -2.5px 0 0 0; 64 | border-radius: 10px; 65 | background-color: black; 66 | top: 50%; 67 | left: 50%; 68 | transform-origin: 0 50%; 69 | transition: transform 1s, width 1s,background-color 1s; 70 | z-index: -20; 71 | } 72 | } 73 | 74 | @for $i from 1 to 7 { 75 | &:nth-of-type(#{$i}):hover { 76 | background-color: rgba(0, 0, 0, 0.3); 77 | transition: 1s; 78 | z-index: -30; 79 | ~span:nth-of-type(7) { 80 | transition: background-color 1s; 81 | &:before { 82 | width: 100px; 83 | background-color: white; 84 | transform: rotate(-90deg + 60 * ($i - 1)); 85 | transition: transform 1s, width 1s,background-color 1s; 86 | } 87 | } 88 | } 89 | } 90 | &:nth-of-type(1):hover, 91 | &:nth-of-type(2):hover, 92 | &:nth-of-type(6):hover { 93 | line-height: 70px; 94 | } 95 | &:nth-of-type(3):hover, 96 | &:nth-of-type(4):hover, 97 | &:nth-of-type(5):hover { 98 | line-height: 85px; 99 | } 100 | } 101 | >div { 102 | overflow: hidden; 103 | position: absolute; 104 | height: 100%; 105 | width: 50%; 106 | top: 0; 107 | clip-path: none; 108 | z-index: 2; 109 | transition: left 3s ; 110 | &:nth-of-type(1) { 111 | left: 0%; 112 | background-color: black; 113 | &::before { 114 | content: ""; 115 | position: absolute; 116 | width: 100%; 117 | height: 50%; 118 | background-color: white; 119 | top: 0; 120 | right: -50%; 121 | border-radius: 50%; 122 | } 123 | &:after { 124 | content: ""; 125 | position: absolute; 126 | width: 25%; 127 | height: 12.5%; 128 | background-color: black; 129 | top: 56.25px; 130 | right: -12.5%; 131 | border-radius: 50%; 132 | } 133 | >div { 134 | position: absolute; 135 | width: 25%; 136 | height: 12.5%; 137 | background-color: white; 138 | bottom: 56.25px; 139 | right: -12.5%; 140 | border-radius: 50%; 141 | } 142 | } 143 | &:nth-of-type(2) { 144 | left: 50%; 145 | background-color: white; 146 | &:before { 147 | content: ""; 148 | position: absolute; 149 | width: 100%; 150 | height: 50%; 151 | background-color: black; 152 | bottom: 0; 153 | left: -50%; 154 | border-radius: 50%; 155 | } 156 | &:after { 157 | content: ""; 158 | position: absolute; 159 | width: 25%; 160 | height: 12.5%; 161 | background-color: white; 162 | bottom: 56.25px; 163 | left: -12.5%; 164 | border-radius: 50%; 165 | } 166 | >div { 167 | position: absolute; 168 | width: 25%; 169 | height: 12.5%; 170 | background-color: black; 171 | top: 56.25px; 172 | left: -12.5%; 173 | border-radius: 50%; 174 | } 175 | } 176 | } 177 | 178 | &:focus { 179 | animation: 0s; 180 | >div:nth-of-type(1) { 181 | left: -100%; 182 | transition: left 3s; 183 | } 184 | >div:nth-of-type(2) { 185 | left: 150%; 186 | transition: left 3s; 187 | } 188 | } 189 | } 190 | 191 | 192 | a{ 193 | width: 25%; 194 | height: 25%; 195 | display: inline-block; 196 | background-size: 100%; 197 | background-repeat: no-repeat; 198 | background-position:center; 199 | border-radius: 100%; 200 | } 201 | span:nth-of-type(1) a{ 202 | background-image: url(./picture/google.png); 203 | } 204 | span:nth-of-type(2) a{ 205 | position: relative; 206 | left:-3.9px; 207 | background-image: url(./picture/biying.png); 208 | } 209 | span:nth-of-type(3) a{ 210 | position: relative; 211 | left:-3.9px; 212 | background-image: url(./picture/bd.png); 213 | } 214 | span:nth-of-type(4) a{ 215 | position: relative; 216 | left:-1.5px; 217 | background-image: url(./picture/github.png); 218 | } 219 | span:nth-of-type(5) a{ 220 | position: relative; 221 | left:.5px; 222 | background-image: url(./picture/v2ex.jpg); 223 | } 224 | span:nth-of-type(6) a{ 225 | position: relative; 226 | left:-0.5px; 227 | background-image: url(./picture/zhihu.png); 228 | } 229 | 230 | @keyframes a { 231 | from { 232 | transform: rotate(0deg); 233 | } 234 | to { 235 | transform: rotate(-360deg); 236 | } 237 | } 238 | 239 | --------------------------------------------------------------------------------