css实现立体折纸文字悬浮效果代码

代码语言:html

所属分类:悬停

代码描述:css实现立体折纸文字悬浮效果代码

代码标签: cs 立体 折纸 文字 悬浮

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background:#000;
  overflow:hidden;
}

.center{
  position:absolute;
  top:50%;
  left:50%;
  transform:prespective(1000px) translate(-50%,-50%);
  transform:skewY(15deg);
  transition:0.5s;
}

.center:hover{
  transform:prespective(1000px) translate(-50%,-50%);
  transform:skewY(0deg);
}

.center h1 span{
  position:absolute;
  top:0;
  left:0;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  text-transform:uppercase;
  font-size:12em;
  color:#fff;
  transform-style:preserve-3d;
  transition:0.8s;
}
.center h1 span:nth-child(1){
  clip-path: polygo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0