码迷,mamicode.com
首页 > Web开发 > 详细

css-翻页

时间:2017-11-06 11:15:55      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:transform   span   title   content   scale   frame   ref   ice   relative   

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
      .center-bg {
        position: relative;
        top: 100px;
        left: 300px;
        width: 500px;
        height: 500px;
        background-color: #ddd;
        border: 1px solid #fff;
      }
      .left-corner {
        position: absolute;
        left: 0;
        top: calc(100% - 100px);
        width: 0;
        height: 0;
        border-bottom: 100px solid #999;
        border-right: 100px solid transparent;

        transform: rotate3d(1,1,0,0deg);
      }
      .right-corner {
        position: absolute;
        top: calc(100% - 100px);
        left: calc(100% - 100px);
        width: 0;
        height: 0;
        border-bottom: 100px solid #999;
        border-left: 100px solid transparent;
      }

      @keyframes flipBook1
          {
            0%   {
                    transform: rotate3d(1,1,0,0deg);
                }

            100% {
                    transform: rotate3d(1,1,0,90deg);
            }
        }
      .flip-animation-1 {
              animation: flipBook1 2s forwards;
              -moz-animation: flipBook1 2s forwards; /* Firefox */
              -webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */
              -o-animation: flipBook1 2s forwards; /* Opera */
          }
    </style>
  </head>
  <body>
    <div class="center-bg">
      <div class="content-area">
        <div>
          <div class="left-corner flip-animation-1">

          </div>
        </div>
        <div>
          <div class="right-corner">

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

技术分享

css-翻页

标签:transform   span   title   content   scale   frame   ref   ice   relative   

原文地址:http://www.cnblogs.com/adouwt/p/7791671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!