CSS3 翻页效果

最新推荐文章于 2023-05-06 00:53:18 发布
最新推荐文章于 2023-05-06 00:53:18 发布
阅读量644 收藏 2
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenshuangwtt/article/details/43233779
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #my3dspace{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;

            overflow: hidden;
        }
        #pagegroup{
            width: 400px;
            height: 400px;
            margin: 0 auto;

            -webkit-transform-style:preserve-3d;
            position: relative;
        }

        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;

            color: white;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;
        }

        #page1{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
        }

        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-transform:rotateX(90deg);
        }

        #op{
            text-align: center;
            margin: 40px auto;

        }
    </style>
    <script type="text/javascript">
        var curIndex=1;
        function next(){
            if(curIndex==6)
                return;


            var  curPage=document.getElementById("page"+curIndex);
            curPage.style.webkitTransform="rotateX(-90deg)";

            curIndex++;
            var  nextPage=document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform="rotateX(0deg)";
        }

        function prev(){

            if(curIndex==1)
            return;

            var  curPage=document.getElementById("page"+curIndex);
            curPage.style.webkitTransform="rotateX(90deg)";

            curIndex--;
            var  prevPage=document.getElementById("page"+curIndex);
            prevPage.style.webkitTransform="rotateX(0deg)";


        }

    </script>


</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div id="page1" class="page">1</div>
            <div id="page2" class="page">2</div>
            <div id="page3" class="page">3</div>
            <div id="page4" class="page">4</div>
            <div id="page5" class="page">5</div>
            <div id="page6" class="page">6</div>
        </div>
    </div>
    <div id="op">
            <a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
    </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3翻书效果</title>
    <style type="text/css">
        html,body,div,ul,li,p,span {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
        }
        body{
            background-color: #999;
            padding:8px;
        }
        ul{list-style: none}
        #books{
            display: block;
            width: 980px;
            height: 100%;
            margin: auto;
            position: relative;
            counter-reset: page;
        }
        #books li{
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: #fff;
            transition-duration:0.5s;
            transition-property:transform,opacity;
            transform-style:preserve-3d;
            box-shadow: 0px 0px 12px #000;
        }
        #books li:nth-child(odd){
            left: 50%;
            transform:rotateY(0deg);
            trandform-origin:0 50% 0;
            opacity: 1;
        }
        #books li:nth-child(even){
            left:0;
            background: linear-gradient(90deg, #fff 92%, #eee 99%, #ccc 100%);
            transform:rotateY(180deg);
            transform-origin:100% 50% 0;
            opacity: 0;
        }
        #books li.rl:nth-child(odd){
            transform:rotateY(180deg);
            opacity: 0;
        }
        #books li.rl:nth-child(even){
            transform:rotateY(0deg);
            opacity: 1;
        }
        #books li:nth-child(odd)::before{
            right:0;
        }
        #books li:nth-child(even)::before{
            left:0;
        }
        #books li:before{
            content: counter(page);
            counter-increment: page;
            position: absolute;
            font:12px/1em "宋体";
            padding: 18px;
            bottom:0;
        }
        #books li:after{
            content:"";
            bottom:0;
            position: absolute;
            width:0;
            height:0;
            box-shadow:-1px -1px 12px #e0e0e0;
            transition-duration: 0.3s;
            transition-property: width,height;
        }
        #books li:nth-child(odd)::after{
            right:0;
            background: linear-gradient(-45deg, transparent 50%, #eee 50%, #fff 90%);
        }
        #books li:nth-child(even)::after{
            left:0;
            background: linear-gradient(45deg, transparent 50%, #eee 50%, #fff 90%);
        }
        #books li:hover::after{
            width:30px;
            height:30px;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
           var page=$("#books li").length;
           $("#books li").each(function(index,item){
               $(this).css("z-index",page-index);
           });
           $("#books li:even").click(function(e){
               $(this).add($(this).next()).addClass("rl");
               var obj=this;
               setTimeout(function(){
                  $(obj).add($(obj).next()).css("z-index","auto");
               },500);
           });
           $("#books li:odd").click(function(e){
              $(this).prev().css("z-index",page-$(this).index()+1);
              $(this).css("z-index",page-$(this).index());
              $(this).add($(this).prev()).removeClass("rl");
           });
        });
    </script>
</head>
<body>
    <ul id="books">
        <li><p style="font-size: 300px; text-align: center;">1</p></li>
        <li><p style="font-size: 300px; text-align: center;">2</p></li>
        <li><p style="font-size: 300px; text-align: center;">3</p></li>
        <li><p style="font-size: 300px; text-align: center;">4</p></li>
        <li><p style="font-size: 300px; text-align: center;">5</p></li>
        <li><p style="font-size: 300px; text-align: center;">6</p></li>
        <li><p style="font-size: 300px; text-align: center;">7</p></li>
        <li><p style="font-size: 300px; text-align: center;">8</p></li>
        <li><p style="font-size: 300px; text-align: center;">9</p></li>
        <li><p style="font-size: 300px; text-align: center;">10</p></li>
        <li><p style="font-size: 300px; text-align: center;">11</p></li>
        <li><p style="font-size: 300px; text-align: center;">12</p></li>
    </ul>
</body>
</html>



在路上_等你
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3实现书本翻页效果
weixin_51364599的博客
12-22 1万+
css3翻页效果 关键要点： 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置 代码总览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
html+css翻页动画效果
01-27
然后，利用CSS3的transform属性来实现翻页效果。翻页动画通常涉及到旋转和平移，我们可以使用`transform: rotateY()`和`transform-origin`来实现3D翻转效果。例如： ```css .page { perspective: 1000px; /* 创建...
css3绘制3d翻页效果
亚里士朱德的专栏
02-22 3631
核心内容： 1.css3的transition属性来制作简单的动画 transition属性可以为指定的css属性添加动画效果，这个动画用到的是transform属性 transition: property duration timing-function delay; 复杂的动画效果可以用keyframes来绘制 2.css3绘制3d图形旋转效果 transform属性
transforms 属性 - CSS3 新特性
向往的那片海洋
12-17 520
变形是什么 在 CSS3 中提供 transforms 属性，通过修改坐标，可以在不影响正常文档流的情况下改变作用内容的位置。CSS transforms 包括一系列 CSS 属性，通过这些属性可以对 HTML 元素进行变形。可以进行的变形有以下几种： 旋转 倾斜 缩放 位移 同时适用于平面以及三维空间 变形属性 transfrom 属性 在 CSS 中 transform 属性允许我们修改 CSS 视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（
使用CSS3实现翻书效果（二）
srk19960903的博客
03-27 6109
原来一直使用QQ直接登录的博客，今天绑定了一下邮箱，原来的博客全没了，只好把原来备份的博文重新发了一下，还好只有两篇~         昨天把css3实现翻书样式的效果实现了大半，今天将其主体的样式全部实现了，下面将进行说明：         我们仔细观察书本的样式发现书本底下是有阴影的，而且阴影可以随着翻书的动作来移动，书皮的左右两侧也分别有一条封边，看起来非常真实，这里主要是使用了元素的a
HTML css实现翻页效果,关于CSS3实现翻页特效
weixin_42367148的博客
06-04 469
为什么我的代码我检查了几遍，还是没有翻页的效果，麻烦哪位帮帮我，而且我不知道为什么翻页的默认数字是3，不应该curIndex的值是1页面最初默认显示的是page1的内容1吗？制作翻页效果#my3dpage{-webkit-perspective:800px;-webkit-perspective-origin:50% 50%;overflow: hidden;}#pagegroup{width:4...
css实现翻页
weixin_52099241的博客
05-06 2177
css实现翻页特效
css3的书本翻页效果
xiaopeng2493的博客
01-08 1万+
最近我们网站要上线一个页面，要做一个轮播。我一般接触的轮播，都是淡入淡出或者左右切入切出，那天产品说要做一个书的翻页的效果，就是书从一角掀起然后向着一个方向走的效果。跟带我的同事对了一下，他跟我说做一个淡入淡出的效果就可以了，太复杂的效果浏览器的兼容性很麻烦。话虽如此，但还是查了一下，并且尝试实现了一个demo，不过自己的空间想象能力太差... 最后的结果是参照这个示例来做的，最后我做出来的效果
利用CSS，实现翻页效果
weixin_46683455的博客
10-09 3802
利用css的3d效果，实现一个简单的翻页器。
css3几种常见的翻页特效
热门推荐
帆酱的博客
09-11 2万+
翻页特效 线上demo：https://my.weblf.cn/xly/demo/book_hand_back2.html html: <div class="book preserve-3d"> <div class="now_page point"> <div class="book-page"> <p>第三页...
jQuery和css3翻页效果幻灯片插件
12-11
**jQuery和CSS3翻页效果幻灯片插件详解** 在网页设计中，动态效果的引入可以极大地提升用户体验，使得网站或应用更具吸引力。本文将详细介绍一款基于jQuery和CSS3技术实现的翻页效果幻灯片插件。该插件以其独特的...
CSS3简洁版左右翻页电子书效果
06-12
例如，翻页效果可能依赖于CSS3的3D转换、过渡（transition）和动画（animation）等特性，这些在Internet Explorer 9及以下版本中通常不被支持。为了确保更广泛的兼容性，开发者需要结合使用JavaScript库（如jQuery）...
CSS翻页效果
08-14
整理的各种翻页效果，点击下面链接查看相关效果，需要的在下载： https://blog.csdn.net/jizhang05292/article/details/81664380
css3立体3D 翻页效果
06-24
在CSS3中，立体3D翻页效果是一种高级的网页设计技术，它为网页增添了动态和交互性，使用户能够以模拟真实书籍翻页的方式浏览内容。这种效果通常用于电子书、画册或者任何需要展示多页面内容的场景。下面我们将深入...
财务日常记账表.xlsx
08-13
工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
基于C#实现慕.课线上批改作业源码+文档说明+界面演示 (超级简单版期末大作业)
最新发布
08-13
<项目介绍> 基于C#实现慕.课线上批改作业源码+文档说明+界面演示 (超级简单版期末大作业) - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
HW营销人力资源体系.pptx
08-13
HW营销人力资源体系.pptx
机器学习资源大全中文版，包括机器学习领域的框架、库以及软件
08-13
机器学习资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理。awesome-machine-learning 就是 josephmisiti 发起维护的机器学习资源列表，内容包括了机器学习领域的框架、库以及软件（按编程语言排序）。 Awesome 系列虽然挺全，但基本只对收录的资源做了极为简要的介绍，如果有更详细的中文介绍，对相应开发者的帮助会更大。这也是我们发起这个开源项目的初衷。
用css3实现翻页效果
06-12
使用CSS3实现翻页效果可以使用`transform`属性和`transition`属性来实现。以下是一个简单的实现翻页效果的CSS代码： HTML部分： ```html 第一页的内容 第二页的内容 第三页的内容 第四页的内容 ``` CSS部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值