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

代码语言: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-gr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0