一个div实现复仇者联盟中的无限手套效果代码-html代码-BFW代码库

代码语言：html
代码描述：一个div实现复仇者联盟中的无限手套效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
/* Centering and scroll removal */
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #ababdd;
}

/* Image */
.infinity-gauntlet {
  background: radial-gradient(0.4em 0.4em at 6em 9em, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(2.2em 3em at 6em 9.4em, #fcae50 0.55em, #444444 0.6em, #444444 0.75em, #ed842e 0.8em, #ed842e 1.05em, rgba(237, 132, 6, 0) 1.1em), radial-gradient(0.4em 0.4em at 8.6em 9em, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(2.2em 3em at 8.6em 9.4em, #f43837 0.55em, #444444 0.6em, #444444 0.75em, #ed842e 0.8em, #ed842e 1.05em, rgba(237, 132, 6, 0) 1.1em), radial-gradient(0.4em 0.4em at 11.3em 9em, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(2.2em 3em at 11.3em 9.4em, #3d8af9 0.55em, #444444 0.6em, #444444 0.75em, #ed842e 0.8em, #ed842e 1.05em, rgba(237, 132, 6, 0) 1.1em), radial-gradient(0.4em 0.4em at 13.9em 9em, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(2.2em 3em at 13.9em 9.4em, #c4359f 0.55em, #444444 0.6em, #444444 0.75em, #ed842e 0.8em, #ed842e 1.05em, rgba(237, 132, 6, 0) 1.1em), radial-gradient(0.6em 0.6em at 10em 13.7em, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(3.7em 5.3em at 10em 14.6em, #fbd717 1.1em, #444444 1.15em, #444444 1.4em, #fb9833 1.45em, #fb9833 49.5%, rgba(251, 152, 51, 0) 50%), linear-gradient(45deg, rgba(251, 152, 51, 0) 50%, #fb9833 50%) 8em 17em/0.6em 0.6em, linear-gradient(#444444, #444444) 6em 14.3em/1.4em 0.4em, linear-gradient(#444444, #444444) 6.3em 15em/0.9em 0.2em, linear-gradient(#444444, #444444) 6.7em 15.7em/0.9em 0.2em, linear-gradient(#444444, #444444) 7em 16.4em/0.9em 0.2em, linear-gradient(60deg, rgba(68, 68, 68, 0) 1.55em, #444444 1.6em, #444444 1.95em, rgba(68, 68, 68, 0) 2em) 5.8em 14.3em/2em 3.5em, linear-gradient(-45deg, rgba(68, 68, 68, 0) 0.45em, #444444 0.5em, #444444 0.85em, rgba(68, 68, 68, 0) 0.9em) 7.7em 17em/0.8em 0.8em, linear-gradient(-45deg, #fb9833 50%, rgba(251, 152, 51, 0) 50%) 6.6em 13.4em/1em 1em, radial-gradient(125% 200% at 100% 0%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 6.65em 12.3em/1.5em 0.1em, radial-gradient(125% 200% at 100% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 6.4em 12.3em/1.5em 0.3em, radial-gradient(200% 130% at 100% 30%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 7em 12.3em/0.6em 1.5em, radial-gradient(200% 130% at 100% 30%, #444444 49%, rgba(68, 68, 68, 0) 50%) 6.8em 12.3em/0.6em 1.5em, radial-gradient(200% 200% at 100% 0%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 6.7em 11.2em/1.5em 0.7em, radial-gradient(200% 200% at 100% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 6.6em 11.5em/1.5em 0.7em, radial-gradient(200% 130% at 100% 40%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 6.5em 11.5em/1.1em 2.6em, radial-gradient(200% 130% at 100% 40%, #444444 49%, rgba(68, 68, 68, 0) 50%) 6.2em 11.5em/1.1em 2.6em, linear-gradient(-45deg, rgba(251, 152, 51, 0) 50%, #fb9833 50%) 11.3em 17em/0.6em 0.6em, linear-gradient(#444444, #444444) 12.5em 14.3em/1.4em 0.4em, linear-gradient(#444444, #444444) 12.7em 15em/0.9em 0.2em, linear-gradient(#444444, #444444) 12.4em 15.7em/0.9em 0.2em, linear-gradient(#444444, #444444) 12.1em 16.4em/0.9em 0.2em, linear-gradient(-60deg, rgba(68, 68, 68, 0) 1.55em, #444444 1.6em, #444444 1.95em, rgba(68, 68, 68, 0) 2em) 12.2em 14.3em/2em 3.5em, linear-gradient(45deg, rgba(68, 68, 68, 0) 0.45em, #444444 0.5em, #444444 0.85em, rgba(68, 68, 68, 0) 0.9em) 11.5em 17em/0.8em 0.8em, linear-gradient(45deg, #fb9833 50%, rgba(251, 152, 51, 0) 50%) 12.35em 13.4em/1em 1em, radial-gradient(125% 200% at 0% 0%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 11.8em 12.3em/1.5em 0.1em, radial-gradient(125% 200% at 0% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 12.05em 12.3em/1.5em 0.3em, radial-gradient(200% 130% at 0% 30%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 12.3em 12.3em/0.6em 1.5em, radial-gradient(200% 130% at 0% 30%, #444444 49%, rgba(68, 68, 68, 0) 50%) 12.5em 12.3em/0.6em 1.5em, radial-gradient(200% 200% at 0% 0%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 11.8em 11.2em/1.5em 0.7em, radial-gradient(200% 200% at 0% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 11.9em 11.5em/1.5em 0.7em, radial-gradient(200% 130% at 0% 40%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 12.3em 11.5em/1.1em 2.6em, radial-gradient(200% 130% at 0% 40%, #444444 49%, rgba(68, 68, 68, 0) 50%) 12.6em 11.5em/1.1em 2.6em, linear-gradient(5deg, rgba(251, 152, 51, 0) 0.45em, #fb9833 0.5em, #fb9833 0.75em, rgba(251, 152, 51, 0) 0.8em) 7.75em 11.5em/2.25em 3em, linear-gradient(30deg, rgba(251, 152, 51, 0) 1.6em, #fb9833 1.65em, #fb9833 1.85em, rgba(251, 152, 51, 0) 1.9em) 7.75em 11.5em/4.5em 3em, linear-gradient(55deg, rgba(251, 152, 51, 0) 2.3em, #fb9833 2.35em, #fb9833 2.55em, rgba(251, 152, 51, 0) 2.6em) 7.75em 11.5em/4.5em 3em, linear-gradient(90deg, rgba(251, 152, 51, 0) 2.1em, #fb9833 2.15em, #fb9833 2.45em, rgba(251, 152, 51, 0) 2.4em) 7.75em 11.5em/4.5em 3em, linear-gradient(-55deg, rgba(251, 152, 51, 0) 2.3em, #fb9833 2.35em, #fb9833 2.55em, rgba(251, 152, 51, 0) 2.6em) 7.75em 11.5em/4.5em 3em, linear-gradient(-30deg, rgba(251, 152, 51, 0) 1.6em, #fb9833 1.65em, #fb9833 1.85em, rgba(251, 152, 51, 0) 1.9em) 7.75em 11.5em/4.5em 3em, linear-gradient(-5deg, rgba(251, 152, 51, 0) 0.5em, #fb9833 0.55em, #fb9833 0.75em, rgba(251, 152, 51, 0) 0.8em) 10em 11.5em/2.25em 3em, linear-gradient(70deg, rgba(251, 152, 51, 0) 2.7em, #fb9833 2.75em, #fb9833 2.95em, rgba(251, 152, 51, 0) 3em) 7.75em 14.5em/4.5em 3em, linear-gradient(40deg, rgba(251, 152, 51, 0) 3.2em, #fb9833 3.25em, #fb9833 3.45em, rgba(251, 152, 51, 0) 3.5em) 7.75em 14.5em/4.5em 3em, linear-gradient(15deg, rgba(251, 152, 51, 0) 2.6em, #fb9833 2.65em, #fb9833 2.85em, rgba(251, 152, 51, 0) 2.9em) 10em 14.5em/2.25em 3em, linear-gradient(-70deg, rgba(251, 152, 51, 0) 2.7em, #fb9833 2.75em, #fb9833 2.95em, rgba(251, 152, 51, 0) 3em) 7.75em 14.5em/4.5em 3em, linear-gradient(-40deg, rgba(251, 152, 51, 0) 3.2em, #fb9833 3.25em, #fb9833 3.45em, rgba(251, 152, 51, 0) 3.5em) 7.75em 14.5em/4.5em 3em, linear-gradient(-15deg, rgba(251, 152, 51, 0) 2.6em, #fb9833 2.65em, #fb9833 2.85em, rgba(251, 152, 51, 0) 2.9em) 7.75em 14.5em/2.25em 3em, radial-gradient(4.5em 6em at 10em 14.6em, #444444 49.5%, rgba(68, 68, 68, 0) 50%), radial-gradient(0.4em 0.4em at 7.4em 8.2em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(0.4em 0.4em at 10em 8.2em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(0.4em 0.4em at 12.6em 8.2em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(0.6em 0.6em at 4.6em 17.4em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(0.6em 0.6em at 15.6em 17.4em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 9em 17.8em/0.4em 0.7em, linear-gradient(#444444, #444444) 10.5em 17.8em/0.4em 0.7em, linear-gradient(#444444, #444444) 8.5em 18.5em/3em 0.6em, linear-gradient(#444444, #444444) 9em 19.8em/0.4em 1em, linear-gradient(#444444, #444444) 9.75em 19.5em/0.4em 1.6em, linear-gradient(#444444, #444444) 10.5em 19.8em/0.4em 1em, radial-gradient(3.7em 1em at 10em 20.75em, #fb9833 49%, rgba(251, 152, 51, 0) 50%), linear-gradient(110deg, rgba(68, 68, 68, 0) 0.7em, #444444 0.7em, #444444 1.3em, #fb9833 1.2em) 7.6em 18.5em/2.5em 2.25em, linear-gradient(-110deg, rgba(68, 68, 68, 0) 0.7em, #444444 0.7em, #444444 1.3em, #fb9833 1.2em) 9.9em 18.5em/2.5em 2.25em, radial-gradient(100% 200% at 50% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 9.5em 7.1em/1em 0.5em, radial-gradient(100% 200% at 50% 0%, #444444 49%, rgba(68, 68, 68, 0) 50%) 12.5em 7.1em/1em 0.5em, linear-gradient(15deg, rgba(68, 68, 68, 0) 0.55em, #444444 0.6em, #444444 1.15em, rgba(68, 68, 68, 0) 1.2em) 13em 6.6em/2.7em 1.2em, linear-gradient(#444444, #444444) 7.9em 6.6em/5.25em 0.6em, linear-gradient(130deg, rgba(68, 68, 68, 0) 0.75em, #444444 0.8em, #444444 1.35em, #fb9833 1.4em) 6.6em 6.6em/6em 1.3em, linear-gradient(#444444, #444444) 5em 7.3em/2em 0.6em, radial-gradient(100% 200% at 50% 60%, rgba(68, 68, 68, 0) 6.35em, #444444 6.4em, #444444 49.5%, rgba(68, 68, 68, 0) 50%) 3em 7.3em/14.2em 12.6em, radial-gradient(100% 230% at 50% 70%, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 3.1em 7.3em/14em 9.5em, radial-gradient(110% 100% at 50% 0, #fb9833 49%, rgba(251, 152, 51, 0) 50%) 3.5em 16.8em/13.1em 4.2em, radial-gradient(120% 100% at 50% 0, #444444 49%, rgba(68, 68, 68, 0) 50%) 3.5em 17.4em/13.1em 4.2em, radial-gradient(120% 100% at 50% 0, #ed842e 49%, rgba(237, 132, 6, 0) 50%) 3.6em 17.8em/12.9em 4.8em, radial-gradient(150% 100% at 50% 0, #444444 49%, rgba(68, 68, 68, 0) 50%) 4em 17.5em/12.1em 6.8em, radial-gradient(0.5em 0.5em at 5.6em 4em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 5.35em 4em/0.5em 1em, radial-gradient(0.5em 0.5em at 5.6em 6.25em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 5.35em 6.25em/0.5em 1.25em, linear-gradient(#444444 0.6em, rgba(68, 68, 68, 0) 0.6em, rgba(68, 68, 68, 0) 1.1em, #444444 1.1em, #444444 1.8em, rgba(68, 68, 68, 0) 1.8em, rgba(68, 68, 68, 0) 3.3em, #444444 3.3em, #444444 4em, rgba(68, 68, 68, 0) 4em) 4.6em 1.5em/2em 6.5em, linear-gradient(90deg, #444444 0.6em, #fb9833 0.6em, #fb9833 2.2em, #444444 2.2em) 4.2em 1.5em/2.8em 6.5em, radial-gradient(0.5em 0.5em at 8.5em 2.6em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 8.25em 2.6em/0.5em 0.5em, radial-gradient(0.5em 0.5em at 8.5em 4.2em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 8.25em 4.2em/0.5em 0.8em, radial-gradient(0.5em 0.5em at 8.5em 5em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(200% 200% at 50% 0, rgba(68, 68, 68, 0) 0.65em, #444444 0.7em, #444444 49%, rgba(68, 68, 68, 0) 50%) 7.1em 5.25em/2.8em 0.8em, linear-gradient(#444444 0.6em, rgba(68, 68, 68, 0) 0.6em, rgba(68, 68, 68, 0) 1.1em, #444444 1.1em, #444444 1.8em, rgba(68, 68, 68, 0) 1.8em, rgba(68, 68, 68, 0) 2.5em, #444444 2.5em, #444444 3.2em, rgba(68, 68, 68, 0) 3.2em) 7.3em 0.5em/2em 6.5em, linear-gradient(90deg, #444444 0.6em, #fb9833 0.6em, #fb9833 2.2em, #444444 2.2em) 7.1em 0.5em/2.8em 7.5em, radial-gradient(0.5em 0.5em at 11.4em 2.4em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 11.15em 2.3em/0.5em 0.5em, radial-gradient(0.5em 0.5em at 11.4em 4.2em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 11.15em 4.2em/0.5em 0.8em, radial-gradient(0.5em 0.5em at 11.4em 5em, #444444 49%, rgba(68, 68, 68, 0) 50%), radial-gradient(200% 200% at 50% 0, rgba(68, 68, 68, 0) 0.65em, #444444 0.7em, #444444 49%, rgba(68, 68, 68, 0) 50%) 10em 5.25em/2.8em 0.8em, linear-gradient(#444444 0.6em, rgba(68, 68, 68, 0) 0.6em, rgba(68, 68, 68, 0) 1.3em, #444444 1.3em, #444444 2em, rgba(68, 68, 68, 0) 2em, rgba(68, 68, 68, 0) 2.7em, #444444 2.7em, #444444 3.4em, rgba(68, 68, 68, 0) 3.4em) 10.5em 0/2em 6.5em, linear-gradient(90deg, #444444 0.6em, #fb9833 0.6em, #fb9833 2.2em, #444444 2.2em) 10em 0/2.8em 8em, radial-gradient(0.5em 0.5em at 14.4em 3.5em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 14.15em 3.6em/0.5em 0.5em, radial-gradient(0.5em 0.5em at 14.4em 5.3em, #444444 49%, rgba(68, 68, 68, 0) 50%), linear-gradient(#444444, #444444) 14.15em 5.4em/0.5em 2em, linear-gradient(#444444 0.6em, rgba(68, 68, 68, 0) 0.6em, rgba(68, 68, 68, 0) 0.9em, #444444 0.9em, #444444 1.6em, rgba(68, 68, 68, 0) 1.6em, rgba(68, 68, 68, 0) 2em, #444444 2em, #444444 2.7em, rgba(68, 68, 68, 0) 2.7em, rgba(68, 68, 68, 0) 3.3em, #444444 3.3em, #444444 3.9em, rgba(68, 68, 68, 0) 3.9em) 13.3em 0.5em/2em 6.5em, linear-gradient(90deg, #444444 0.6em, #fb9833 0.6em, #fb9833 2.2em, #444444 2.2em) 13em 0.5em/2.8em 7.5em, radial-gradient(1.2em 0.6em at 20em 10.5em, #444444 49.75%, rgba(68, 68, 68, 0) 50%), radial-gradient(1.2em 0.6em at 18.3em 13.7em, #444444 49.75%, rgba(68, 68, 68, 0) 50%), linear-gradient(-30deg, rgba(68, 68, 68, 0) 0.4em, #444444 0.4em, #444444 0.9em, rgba(68, 68, 68, 0) 0.9em) 17em 13.4em/1em 1em, radial-gradient(100% 200% at 50% 100%, #fb9833 49.75%, rgba(251, 152, 51, 0) 50%) 18.1em 9.7em/2.2em 1.7em, radial-gradient(100% 200% at 50% 100%, #444444 49.75%, rgba(68, 68, 68, 0) 50%) 17.5em 9em/3.5em 2.4em, linear-gradient(90deg, #444444 0.6em, #fb9833 0.6em, #fb9833 2.8em, #444444 2.8em) 17.5em 11em/3.5em 3em, radial-gradient(200% 2.........完整代码请登录后点击上方下载按钮下载查看