div+css实现跟随鼠标位置交互三维3d红色钻石代码

代码语言:html

所属分类:三维

代码描述:div+css实现跟随鼠标位置交互三维3d红色钻石代码

代码标签: div css 跟随 鼠标 位置 交互 三维 3d 红色 钻石 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
   body{
       background:black;
  
}
.bg {
  background: radial-gradient(circle at center, #1a1a24 0%, #000000 100%);
  overflow: hidden;
  font-family: sans-serif;
  width: 100%;
  height: 100%;
}
.tracker {
  position: absolute;
  width: 20%;
  height: 20%;
  z-index: 100;
}
.tr-1 {
  top: 0;
  left: 0;
}
.tr-2 {
  top: 0;
  left: 20%;
}
.tr-3 {
  top: 0;
  left: 40%;
}
.tr-4 {
  top: 0;
  left: 60%;
}
.tr-5 {
  top: 0;
  left: 80%;
}
.tr-6 {
  top: 20%;
  left: 0;
}
.tr-7 {
  top: 20%;
  left: 20%;
}
.tr-8 {
  top: 20%;
  left: 40%;
}
.tr-9 {
  top: 20%;
  left: 60%;
}
.tr-10 {
  top: 20%;
  left: 80%;
}
.tr-11 {
  top: 40%;
  left: 0;
}
.tr-12 {
  top: 40%;
  left: 20%;
}
.tr-13 {
  top: 40%;
  left: 40%;
}
.tr-14 {
  top: 40%;
  left: 60%;
}
.tr-15 {
  top: 40%;
  left: 80%;
}
.tr-16 {
  top: 60%;
  left: 0;
}
.tr-17 {
  top: 60%;
  left: 20%;
}
.tr-18 {
  top: 60%;
  left: 40%;
}
.tr-19 {
  top: 60%;
  left: 60%;
}
.tr-20 {
  top: 60%;
  left: 80%;
}
.tr-21 {
  top: 80%;
  left: 0;
}
.tr-22 {
  top: 80%;
  left: 20%;
}
.tr-23 {
  top: 80%;
  left: 40%;
}
.tr-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0