css实现翻页效果

最新推荐文章于 2025-05-25 11:06:22 发布

转载最新推荐文章于 2025-05-25 11:06:22 发布 · 686 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fj0716/p/4795941.html

如图，鼠标移动到图上，实现右上角翻页的效果，本例主要border边框的设置。

一、基本概念

<html>
    <head>
    <style>
        #demo{
            width:0;
            height:0;
            border:solid 50px;
            border-top-color: #f00 ;
            border-right-color: #ff0 ;
            border-bottom-color:#0f0;    
            border-left-color:#00f;
        }
    </style>
    </head>
    <body>
    <div id="demo"></div>
    </body>
</html>

当元素width和height为0，此时的边框呈现如上图所示，相邻的两条边框可以组成新的三角形。

所以我们的翻页效果就是，蓝绿组成新的三角形（颜色设为相同），红黄组成新的三角形（颜色设为相同），并且边框宽度逐渐由0变大的过程。

如果要实现翻页边框的长宽比，则要对边界线两边的边框单独设置，本例即要单独设置红蓝边框或者黄绿边框

<html>
    <head>
    <style>
        #demo{
            width:0;
            height:0;
            border:solid 50px;
            border-top-color: #f00 ;
            border-right-color: #ff0 ;
            border-bottom-color:#0f0;    
            border-left-color:#00f;
            border-width: 80px 80px 50px 50px;
        }
    </style>
    </head>
    <body>
    <div id="demo"></div>
    </body>
</html>

这是对上/右边框设置的效果。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>border-width效果</title>
    <style type="text/css">
        body {
            background-color: #eaf0f2;
        }
        .paper-flip {
          position: relative;
          width: 500px;
          height: 300px;
          margin: 0 auto;
        }

        /*image-layer*/
        .image-layer {
          width: 500px;
          height: 300px;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
        }

        .image-layer img {
          width: 500px;
          cursor: pointer;
        }

        .image-layer:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          border-style: solid;
          border-width: 0;
          border-top-color: #fff ;
          border-right-color: #fff;
          border-bottom-color:rgba(0,0,0,0.5);    
          border-left-color:rgba(0,0,0,0.5);
          border-radius: 0 0 0 4px;
          box-shadow: 0 1px 1px rgba(0,0,0,0.5);
          transition:all 0.4s ease-out;
        }

        .image-layer:hover:before{
          border-left-width:50px;
          border-top-width:30px;
        }


    </style>
</head>
<body>
    <div class="paper-flip" id="paper-flip">
      <div class="image-layer" id="image-layer">
        <img src="http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt="">
      </div>
    </div>
</body>
</html>