three三维方块小人跟随鼠标动画效果

代码语言:html

所属分类:三维

代码描述:three三维方块小人跟随鼠标动画效果

代码标签: 小人 跟随 鼠标 动画 效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  overflow: hidden;
  background: #57068c88;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  align-content: center;
}

/* Name Badge */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#name-card-container {
  position: fixed;
  bottom: 0px;
  height: 38px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#name-card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: Avenir;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.2);
}
#name-card > div.dark-background {
  background: #1d1e22;
  padding: 0 10px 0 20px;
  height: 100%;
  color: #fff;
}
#name-card > div.light-background {
  background: #fff;
  padding: 0 20px 0 10px;
  height: 100%;
}
#name-card span.emoji {
  font-size: 18px;
}
#name-card a {
  text-decoration: none;
}
#name-card a:hover {
  text-decoration: .........完整代码请登录后点击上方下载按钮下载查看

网友评论0