zoukankan      html  css  js  c++  java
  • css-翻页

    <!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>

  • 相关阅读:
    【python系统学习04】条件判断语句
    【Python系统学习03】错误类型整理(一)
    【Python系统学习02】数据类型与类型转换
    【Python系统学习01】print函数的用法
    【python系统学习00】基础知识
    Vue + TypeScript 踩坑总结
    React
    我的电子书
    React
    React
  • 原文地址:https://www.cnblogs.com/adouwt/p/7791671.html
Copyright © 2011-2022 走看看