折叠字 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 3D折叠翻转文字动画DEMO演示</title>

<meta name="viewport" content="width=600">

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<p>
    <span data-text="3">3</span>
    <span data-text="D">D</span>
    <span data-text="折">折</span>
    <span data-text="叠">叠</span>
    <span data-text="字">字</span>
    <span data-text="体">体</span>
</p>

</body>
</html>
html,body{margin:0;padding:0;height:100%;}
body{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  background-color:#684da3;
}
p{color:#fff;font-size:4em;font-weight:bold;font-family:"微软雅黑";}
p span {
  display:inline-block;
  position:relative;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  -webkit-perspective:500;
          perspective:500;
  -webkit-font-smoothing:antialiased;
}
p span::before,
p span::after {
  display:none;
  position:absolute;
  top:0;
  left:-1px;
  -webkit-transform-origin:left top;
      -ms-transform-origin:left top;
          transform-origin:left top;
  -webkit-transition:all ease-out 0.3s;
          transition:all ease-out 0.3s;
  content:attr(data-text);
}
p span::before {
  z-index:1;
  color:rgba(0,0,0,0.2);
  -webkit-transform:scale(1.1, 1) skew(0deg, 20deg);
      -ms-transform:scale(1.1, 1) skew(0deg, 20deg);
          transform:scale(1.1, 1) skew(0deg, 20deg);
}
p span::before,
p span::after {
  display:block;
}
p span::after {
  z-index:2;
  color:#684da3;
  text-shadow:-1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
  -webkit-transform:rotateY(-40deg);
          transform:rotateY(-40deg);
}
p span:hover::before {
  -webkit-transform:scale(1.1, 1) skew(0deg, 5deg);
      -ms-transform:scale(1.1, 1) skew(0deg, 5deg);
          transform:scale(1.1, 1) skew(0deg, 5deg);
}
p span:hover::after {
  -webkit-transform:rotateY(-10deg);
          transform:rotateY(-10deg);
}

 

posted @ 2017-07-25 16:09  归尘2016  阅读(171)  评论(0)  编辑  收藏  举报