HTML CSS实现翻页效果（动画）

最新推荐文章于 2024-07-24 11:39:30 发布
最新推荐文章于 2024-07-24 11:39:30 发布
阅读量5.3k 收藏 18
点赞数 1
分类专栏： css html 文章标签： HTML CSS3 3D效果 transform 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boundle_ss/article/details/122316498
版权
html 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

有详情注释说明

<html>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  body,
  html {
    height: 100%;
  }

  body {

    /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，
    大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    background-color: #030303;
    font-family: '微软雅黑';
  }

  .book {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    width: 400px;
    height: 550px;
    background-color: #fff;
    -webkit-transform: rotateX(30deg);
    -ms-transform: rotateX(30deg);
    -o-transform: rotateX(30deg);
    transform: rotateX(30deg);
  }

  .preserve-3d {

    /*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内,
    还是在该元素所在的平面内被扁平化。*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /*规定如何在 3D 空间中呈现被嵌套的元素*/
    transform-style: preserve-3d;
  }

  .book-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 550px;
    /*设置四个边框的样式*/
    border: 1px solid papayawhip;
    text-align: center;
  }

  .book-page-box {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    /*设置旋转元素的基点位置*/
    transform-origin: 0 50%;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    /*旋转DIV元素*/
    transform: rotateY(0deg);
  }

  @keyframes flipBook1 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-160deg);
      -ms-transform: rotateY(-160deg);
      -o-transform: rotateY(-160deg);
      transform: rotateY(-160deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Firefox */
  @-moz-keyframes flipBook1 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-160deg);
      -ms-transform: rotateY(-160deg);
      -o-transform: rotateY(-160deg);
      transform: rotateY(-160deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Safari and Chrome */
  @-webkit-keyframes flipBook1 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-160deg);
      -ms-transform: rotateY(-160deg);
      -o-transform: rotateY(-160deg);
      transform: rotateY(-160deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Opera */
  @-o-keyframes flipBook1 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-160deg);
      -ms-transform: rotateY(-160deg);
      -o-transform: rotateY(-160deg);
      transform: rotateY(-160deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  @keyframes flipBook2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-150deg);
      -ms-transform: rotateY(-150deg);
      -o-transform: rotateY(-150deg);
      transform: rotateY(-150deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Firefox */
  @-moz-keyframes flipBook2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-150deg);
      -ms-transform: rotateY(-150deg);
      -o-transform: rotateY(-150deg);
      transform: rotateY(-150deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Safari and Chrome */
  @-webkit-keyframes flipBook2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-150deg);
      -ms-transform: rotateY(-150deg);
      -o-transform: rotateY(-150deg);
      transform: rotateY(-150deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Opera */
  @-o-keyframes flipBook2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-150deg);
      -ms-transform: rotateY(-150deg);
      -o-transform: rotateY(-150deg);
      transform: rotateY(-150deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  @keyframes flipBook3 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-140deg);
      -ms-transform: rotateY(-140deg);
      -o-transform: rotateY(-140deg);
      transform: rotateY(-140deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Firefox */
  @-moz-keyframes flipBook3 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-140deg);
      -ms-transform: rotateY(-140deg);
      -o-transform: rotateY(-140deg);
      transform: rotateY(-140deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Safari and Chrome */
  @-webkit-keyframes flipBook3 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-140deg);
      -ms-transform: rotateY(-140deg);
      -o-transform: rotateY(-140deg);
      transform: rotateY(-140deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /* Opera */
  @-o-keyframes flipBook3 {
    0% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }

    50% {
      -webkit-transform: rotateY(-140deg);
      -ms-transform: rotateY(-140deg);
      -o-transform: rotateY(-140deg);
      transform: rotateY(-140deg);
    }

    100% {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }

  /*书的封面*/
  .book-page-1 .page-front {
    background-color: cornflowerblue;
  }

  .book-page-1 .page-back {
    background-color: #fff;
  }

  .book-page-1 .page-front p {
    font-size: 40px;
    color: #fff;
    margin-top: 100px;
    font-family: 华文琥珀;
    vertical-align: middle;
    text-align: center;
  }

  .flip-animation-1 {
    /*把 "flipBook" 动画捆绑到 div 元素，时长：17 秒*/
    animation: flipBook1 17s;
    -moz-animation: flipBook1 17s;
    /* Firefox */
    -webkit-animation: flipBook1 17s;
    /* Safari and Chrome */
    -o-animation: flipBook1 17s;
    /* Opera */
  }

  /*书的第二页*/
  .book-page-2 .page-back,
  .book-page-2 .page-front {
    background-color: #fff;
  }

  .book-page-2 .page-front p {
    font-size: 25px;
    color: #1976D2;
    font-family: 华文楷体;
    margin-top: 100px;
    writing-mode: tb-rl;
  }

  .flip-animation-2 {
    /*把 "flipBook2" 动画捆绑到 div 元素，时长：13 秒,延长2秒*/
    animation: flipBook2 13s 2s;
    -moz-animation: flipBook2 13s 2s;
    /* Firefox */
    -webkit-animation: flipBook2 13s 2s;
    /* Safari and Chrome */
    -o-animation: flipBook2 13s 2s;
    /* Opera */
  }

  /*书的第三页*/
  .book-page-3 .page-back,
  .book-page-3 .page-front {
    background-color: #fff;
  }

  .book-page-3 .page-front p {
    font-size: 30px;
    color: #1976D2;
    margin-top: 100px;
    font-family: 华文楷体;
  }

  .flip-animation-3 {
    animation: flipBook3 10s 3s;
    -moz-animation: flipBook3 10s 3s;
    /* Firefox */
    -webkit-animation: flipBook3 10s 3s;
    /* Safari and Chrome */
    -o-animation: flipBook3 10s 3s;
    /* Opera */
  }

  /*书的第四页*/
  .book-page-4 .page-front p {
    font-size: 30px;
    color: #1976D2;
    margin-top: 50px;
    writing-mode: tb-rl;
    font-family: 华文楷体;
  }
</style>

<body>
  <!-- 书的主体 -->
  <div class="book preserve-3d">
    <!-- 书的最后一页 -->
    <div class="book-page-box book-page-4 preserve-3d">
      <div class="book-page page-front">
        <p>
          淫邪不能惑其心，愚智贤不肖，不惧于物，故合于道。

          所以能年皆度百岁而动作不衰者，以其德全不危也。
          <br />
          <br />
          <br />
        </p>
      </div>
    </div>
    <!-- 书的第三页 -->
    <div class="book-page-box book-page-3 preserve-3d flip-animation-3">
      <div class="book-page page-front">
        <p>
          不时御神，务快其心，逆于生乐，起居无节，故半百而衰也。
          夫上古圣人之教下也，皆谓之虚邪贼风，避之有时，恬惔虚无，真气从之，精神内守，病安从来。

          是以志闲而少欲，心安而不惧，形劳而不倦，气从以顺，各从其欲，皆得所愿。

          故美其食，任其服，乐其俗，高下不相慕，其民故曰朴。

          是以嗜欲不能劳其目，
        </p>
      </div>
    </div>
    <!-- 书的第二页 -->
    <div class="book-page-box book-page-2 preserve-3d flip-animation-2">
      <div class="book-page page-front">
        <p>
          昔在黄帝，生而神灵，弱而能言，幼而徇齐，长而敦敏，成而登天。
          岐伯对曰：上古之人，其知道者，法于阴阳，和于术数，食饮有节，起居有常，不妄作劳，故能形与神俱，而尽终其天年，度百岁乃去。
          今时之人不然也，以酒为浆，以妄为常，醉以入房，以欲竭其精，以耗散其真，不知持满，
        </p>
      </div>
    </div>
    <!-- 书的封面 -->
    <div class="book-page-box book-page-1 preserve-3d flip-animation-1">
      <div class="book-page page-front">
        <p>
          <br />
          <br />
          <br />
          <br />
          黄帝内经
        </p>
      </div>
    </div>
  </div>
</body>

</html>

 

学而时习之不亦说乎。
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
html+css翻页动画效果
01-27
然后，利用CSS3的transform属性来实现翻页效果。翻页动画通常涉及到旋转和平移，我们可以使用`transform: rotateY()`和`transform-origin`来实现3D翻转效果。例如： ```css .page { perspective: 1000px; /* 创建...
纯CSS实现图片前后翻页效果
01-23
总结来说，纯CSS实现的图片前后翻页效果主要依赖于CSS3的关键帧动画和3D变换功能。通过合理布局HTML元素和设置相应的CSS样式，我们可以创建出流畅、逼真的翻页效果，同时保持代码简洁，提升网页性能。这对于想要优化...
用html、css和jQuery实现图片翻页的特效
忧郁的蛋的专栏
10-26 2544
第三，设置currentImageIndex为0，表示当前显示的图片的索引，totalImages为图片的总数。在以上代码中，我们使用了绝对定位将图片叠放在一起，并将容器的宽度和高度设置为500px和300px。最后，使用jQuery来实现图片的翻页特效。我们将使用jQuery的addClass和removeClass方法，来添加或移除一个名为"active"的类，以控制图片的显示和隐藏。首先，在html中创建一个容器，用于包裹图片的内容，并设置一个唯一的ID，以便在CSS和jQuery中调用。
使用CSS3打造翻书效果：一个创新的技术实践
gitblog_00080的博客
04-08 440
使用CSS3打造翻书效果：一个创新的技术实践 项目地址:https://gitcode.com/BUPT-HJM/css3-flip-book 项目简介 GitCode上的 BUPT-HJM/css3-flip-book 是一个基于纯CSS3实现的在线翻书示例项目。该项目利用了Web技术的力量，为用户提供了一种新颖且互动性强的数字图书阅读体验。通过CSS3的3D变换和过渡效果，模拟出真实的纸张翻页...
2024年HarmonyOS鸿蒙最全手把手讲解ViewPager翻页特效：关键代码_viewpager叠加特效(1)，2024年最新面试突击版
2401_84862025的博客
05-14 513
使用视图动画，将所有子view层叠在一起。原本都是横向排布，所以只需要将所有的view进行x轴位移，即可。上代码：公式的推导很简单，就是。
css实现翻页
weixin_52099241的博客
05-06 2159
css实现翻页特效
利用CSS，实现翻页效果
weixin_46683455的博客
10-09 3776
利用css的3d效果，实现一个简单的翻页器。
CSS实现网页翻页滚动效果
weixin_48642777的博客
09-05 851
CSS实现网页翻页滚动效果
HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果
weixin_33252222的博客
06-04 1256
效果细节其实项目中的关键在于几个属性，perspective和rotate,便是透视和旋转perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定body {/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三...
css实现3D书本翻页动画
weixin_46249441的博客
12-08 2687
先看下效果： 完整代码如下： html： <!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.
js+css实现翻页时钟效果
m0_56938501的博客
01-05 1547
js+css实现翻页时钟效果
教你用HTML+CSS实现百叶窗动画效果_html百叶窗效果
2401_84166396的博客
04-29 494
transitition为css3动画内容，实现百叶窗效果的重要样式，过渡时间设置单位以s/ms为单位。
html5 css3带翻页数字时钟动画特效
11-08
例如，我们可以使用CSS3的`@keyframes`规则定义动画的关键帧，然后通过`animation`属性应用到元素上，实现翻页效果。这个翻页效果可能是通过改变数字的透明度、位置或者大小来模拟翻页的过程，营造出一种数字在时间...
html5 css3实现的3D全屏翻页效果代码
11-24
在本项目"html5 css3实现的3D全屏翻页效果代码"中，我们将探讨如何利用这两种技术来创建一个引人注目的、具有3D视觉冲击力的全屏翻页效果。 HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，以更好...
纯css3书本翻页动画特效
09-08
【纯CSS3书本翻页动画特效】是一种利用现代浏览器对CSS3特性的支持，实现的仿真实体书本翻页效果。这种特效通常用于网页设计中，为用户提供更加直观和交互性强的阅读体验，常见于电子图书、在线文档或者展示类网站。...
CSS实现表格无限轮播
最新发布
像鱼的博客
07-24 307
在React中，用CSS实现表格无线轮播
CSS学习笔记
ngczx的博客
07-23 671
CSS学习笔记
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1028
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html5/css3书本翻页3d动画
06-28
### 回答1： HTML5 和 CSS3 可以使用 3D 动画来实现网页翻页效果。可以使用 CSS3 的 3D 变换和过渡效果来实现翻页效果，并使用 JavaScript 来控制翻页的过程。还可以使用 HTML5 的 canvas 元素来绘制 3D 图形，并使用 JavaScript 来实现动画效果。 ### 回答2： HTML5/CSS3书本翻页3D动画是一种比较新的动画效果，使用现代化的HTML和CSS技术来实现。这种动画效果通常在网页设计、教育、电子杂志等领域中得到广泛应用，它的主要功能是通过模拟实际书本的翻页过程，直观地展现页面内容。 要实现HTML5/CSS3书本翻页3D动画，需要运用一系列新的HTML标签（如canvas、section、article等）和CSS3属性（如transform、transition、perspective等）。通常，实现这种动画需要具备一定的网页设计经验和技能，以及对HTML5和CSS3的深入了解。 实现过程中，首先需要确定网页结构，采用HTML的article、section、canvas等标签来组织页面，并通过CSS3来设置页面的布局和样式。接着，需要使用JavaScript来实现页面的交互效果，例如通过点击按钮来翻页。在实现动画过程中，需要运用CSS3的transition、animation和transform等属性，来控制页面元素的位置、旋转角度、过渡时间等。 总体来说，HTML5/CSS3书本翻页3D动画是一种新的、具有趣味性和实用性的动画效果，它可以有效地提高页面的交互性和可视化效果，为用户带来更加生动、直观的网页浏览体验。 ### 回答3： HTML5和CSS3为网页设计带来了许多新的特性和功能，其中一个比较常见的应用就是实现书本翻页3D动画效果。这种效果的实现需要用到一些HTML5和CSS3的特性，下面我将会依次介绍它们的使用方法。 首先，HTML5中的Canvas标签可以用来实现类似于绘图的功能，它可以在网页中创建出一个画布，然后通过JavaScript代码在上面进行画图。针对书本翻页效果，我们可以将左右两个页面的内容分别绘制在Canvas上，然后使用JavaScript和CSS3控制Canvas的变换，从而实现翻页动画。 其次，CSS3中的Transform属性可以使元素具有平移、旋转、缩放等变换效果。通过对左右两页内容的Canvas元素进行平移、旋转、缩放等变换，我们就可以模拟出真实书本翻页的效果。同时，CSS3中的Transition和Animation属性可以让元素在变换时具有过渡动画或关键帧动画效果，从而使翻页效果更加自然、流畅。 最后，还可以使用JavaScript控制页面的交互效果。通过监听鼠标或手势事件，我们可以在相应的事件触发时调用相应的动画函数，从而实现用户手动翻页的效果。 综上所述，实现书本翻页3D动画效果需要用到HTML5中的Canvas标签、CSS3中的Transform、Transition和Animation属性以及JavaScript脚本等技术。掌握这些技术后，可以通过灵活的组合和应用，实现出丰富、生动的网页翻页效果，提升用户体验和视觉效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学而时习之不亦说乎。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值