有趣的GSAP和3D旋转

下载代码

html

css

分享到微信朋友圈

html

css

body{
  background-color: #151515; 
  background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  background-size:50px 50px;
  overflow:hidden;
}

#textS{ 
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Oswald', tahoma; font-size:45vw;
  text-align:center; white-space: nowrap;
  opacity:0.4;
}

#container{ 
  width:275px; height:275px;  
  position :absolute; 
  left:50%; top:50%; transform: translate(-50%,-50%);
  border:7px solid rgba(0,0,0,0.8);
  border-radius:50%;
  box-shadow: 0px 0px 30px 0px orange , 0px 0px 150px 0px #00fc6e , inset 0px 0px 50px 0px rgba(0,0,0,0.7) ;
  background:rgba(255,255,255,0.2);
}

.R-T , .R-D{
  width:300px; height:300px;
  position:absolute;
  left:50%; top:50%; transform: translate(-50%,-50%);
  opacity:0.8;
  overflow:visible;
  z-index:1;
}

.R-T {clip:rect(0px 300px 150px 0px);   }
.R-D {clip:rect(150px 300px 300px 0px);  }

#core{
  line-height:160px;
  text-align:center; color:white;
  font-size:35px; font-family:'Oswald', tahoma; 
  position:absolute;
  left:50%; top:50%;
  width:160px; height:160px;
  background-color:#008445;
  border-radius:50%;
  transform: translate(-50%,-50%);
  z-index:1;
  box-shadow: inset 0px -10px 2px 5px rgba(0,0,0,0.3) , inset 0px 0px 50px 0px rgba(0,0,0,0.5) ;
  text-shadow: 0px 4px 0px rgba(0,0,0,0.5);
}

svg{overflow:visible}

#DiacoDesignLink,#pens{
  color: #fff;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg