css三维空间线框图效果代码

代码语言:html

所属分类:动画

代码描述:css三维空间线框图效果代码

代码标签: 框图 效果

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


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

<head>

  <meta charset="UTF-8">


  
  
  
<style>
html {
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  height: 100%;
  background: linear-gradient(#6084d7 25%, #a2cef4 50%, #a2cef4 50%, #6084d7 100%);
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  perspective: 360px;
  perspective-origin: 50% 50%;
}

.top-plane, .bottom-plane {
  width: 200%;
  height: 130%;
  position: absolute;
  bottom: -30%;
  left: -50%;
  background-image: -webkit-linear-gradient(#a2cef4 2px, transparent 2px), -webkit-linear-gradient(left, #a2cef4 2px, transparent 2px);
  background-size: 100px 100px,100px 100px;
  background-position: -1px -1px,-1px -1px;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0