CSS 实现 3D 书本展开动效

最新推荐文章于 2024-05-08 19:37:26 发布
最新推荐文章于 2024-05-08 19:37:26 发布
阅读量890 收藏 17
点赞数 25
分类专栏： 前端 文章标签： css 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42693699/article/details/136180461
版权
本文详细介绍了如何使用纯CSS实现一个3D书本的展开动画，包括拆分元素、CSS变量的应用、书本结构绘制、张开和动画效果的添加，以及最终的美化内容。
摘要由CSDN通过智能技术生成

一、前言

本文将使用纯 CSS 实现一个简单的 3D 书本展开动效。

2023-07-18-225831.gif

二、实现思路

实现这么一个书本动效 乍一看可能会感觉有些复杂，实际上并不难，遇到这种组合动效的需求时，我们只要将整体拆分成多个小步骤去做，就很简单了。

1. 拆分主体

在实现动效前，我们需要先将书本画出来，画一个本子，我们可以先简单分成三个元素：封皮、书脊、正文

image.png

2. CSS 变量声明与使用

本不打算加入这段，但考虑到有些没有用过的读者，还是简单讲一下。

在现代 CSS 中，在不使用预处理器的情况下，我们也可以声明 CSS 变量，在当前场景下，我们可以直接将书本的主题色与大小设置为变量，这样我们可以轻松的修改整个书本的样式。

变量声明

CSS 变量定义：带有前缀 -- 的属性名，比如 --example--name，表示声明一个变量。

:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同，我们可以在 :root 伪类中声明全局 CSS 变量。

:root {
  --color: red;
}

变量使用

可以通过 var() 函数使用声明的变量。

div {
  color: var(--color)
}

3. 绘制书本主体

根据第一步的拆分，我们将三个主要部分绘制出来。

<style>
:root {
  /* 书本的高度 */
  --main-height: 150px;
  /* 书本的颜色 */
  --theme-bg-color: rgba(239, 112, 155, .9);
}

div {
  box-sizing: border-box;
}

/* 书本主体  */
#book {
  position: relative;
  margin: 150px auto 80px auto;
  width: 150px;
  height: var(--main-height);
  cursor: pointer;
}

/* 书脊 */
.book-side {
  position: absolute;
  left: -14px;
  width: 15px;
  height: var(--main-height);
  border-radius: 5px 0 0 5px;

  background-color: var(--theme-bg-color);
}

/* 封面 */
.book--cover {
  position: absolute;
  top: 0;
  left: -1px;
  padding: 10px;
  width: 105px;
  height: var(--main-height);
  font-size: 18px;
  font-weight: 400;
  border-radius: 0 6px 6px 0;

  background-color: var(--theme-bg-color);
}

/* 书本内容 Begin */
.book--content {
  padding: 4px 5px 4px 2px;
  width: 105px;
  height: var(--main-height);
  border-radius: 2px;

  background-color: var(--theme-bg-color);
}

.book--inner {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  color: #333;
  border-radius: 1px;

  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
  background-color: rgba(250, 250, 250, 0.8);
}
</style>

<body>
  <div id="book">
    <div class="book-side"></div>
    <div class="book--cover">封面</div>
    <div class="book--content">
      <div class="book--inner"></div>
    </div>
  </div>
</body>

实现效果

Pasted image 20230719001446.png

4. 书本张开效果

现在虽然有了雏形，但是完全闭合的书本并不好看，我们让他有一点微微打开的效果。

通过 rotate 函数，以 x 轴为逆时针旋转 8°， 以 y 轴为顺时针旋转 30°

.book--cover {
  /** 省略... **/
  transform: rotateX(-8deg) rotateY(30deg);
}

实现效果如下，可以看到有了一些样子，但是旋转是以中心进行旋转的，偏离了书脊，不符合我们的预期。

Pasted image 20230719002422.png

可以通过 transform-origin 改变元素变型的原点 来调整旋转的位置。

image.png

设置 x 轴以左侧为旋转点，y 轴以中心为旋转点进行旋转。

.book--cover {
  /** 省略... **/
  transform: rotateX(-8deg) rotateY(30deg);
  transform-origin: left center;
}

实现效果

Pasted image 20230719004005.png

5. 实现动效

完成了书本的基本骨架绘制后，我们可以将动画效果加进来了

鼠标悬浮动效

通过 :hover 伪类设置鼠标悬浮后的效果， 和第四步其实一样，打开效果通过 rotateX 与 rotateY 实现，为了模拟的更加真实，在掀开时加入阴影。

#book:hover .book--cover {
  transform: rotateX(-10deg) rotateY(50deg);
  box-shadow: 30px 0 10px 0 rgba(0, 0, 0, 0.2);
}

这样基本的打开效果就实现好了，但是太过直接，不够平滑，我们对元素加入过度效果。

.book--cover {
  /** 省略... **/
  transition: all .7s linear;
}

这样基本的鼠标效果就实现好了。

书本打开动效

通过 :active 伪类设置长按时的打开效果, 通过 scale 将书本整体适当放大， 并将 封皮 的打开效果尽量放大即可。

#book:active {
  transform: scale(1.7);
}

#book:active .book--cover {
  transform: rotateX(-10deg) rotateY(138deg);
}

添加上面的代码后，便实现了长按打开的效果，为了放大效果更加自然平滑，对 #book 元素添加过渡效果

#book {
  /* 省略... */
  transition: all .7s linear;
}

如此整体功能就实现完成了。

6. 美化内容

功能完成后，我们便可以进一步对书本进行美化，现在整个书本太空，加入一些文字会显得更加丰满充实。

  <div id="book">
    <div class="book-side"></div>
    <div class="book--content">
      <div class="book--cover">
        CSS 圣经
      </div>
      <div class="book--inner">
        <div style="padding-left: 10px">
          <div>~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
        </div>
      </div>
    </div>
  </div>

Pasted image 20230719010316.png

三、完整代码

<!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.0">
  <title>3D 书本动效</title>

  <style>
    :root {
      --main-height: 150px;
      --theme-bg-color: rgba(239, 112, 155, .9);
    }

    div {
      box-sizing: border-box;
    }

    /* 书本主体  */
    #book {
      position: relative;
      margin: 150px auto 80px auto;
      width: 150px;
      height: var(--main-height);
      transition: all .7s linear;
      cursor: pointer;
    }

    /* 书脊 */
    .book-side {
      position: absolute;
      left: -14px;
      width: 15px;
      height: var(--main-height);
      border-radius: 5px 0 0 5px;

      background-color: var(--theme-bg-color);
    }

    /* 封面 */
    .book--cover {
      position: absolute;
      top: 0;
      left: -1px;
      padding: 10px;
      width: 105px;
      height: var(--main-height);
      font-size: 18px;
      font-weight: 400;
      border-radius: 0 6px 6px 0;
      transform-origin: left center;
      transform: rotateX(-8deg) rotateY(30deg);
      transition: all .7s linear;

      background-color: var(--theme-bg-color);
    }

    #book:active {
      transform: scale(1.7);
    }

    #book:hover .book--cover {
      transform: rotateX(-10deg) rotateY(50deg);
      box-shadow: 30px 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    #book:active .book--cover {
      transform: rotateX(-10deg) rotateY(138deg);
    }

    /* 书本内容 Begin */
    .book--content {
      padding: 4px 5px 4px 2px;
      width: 105px;
      height: var(--main-height);
      border-radius: 2px;

      background-color: var(--theme-bg-color);
    }

    .book--inner {
      padding: 10px 0;
      width: 100%;
      height: 100%;
      color: #333;
      border-radius: 1px;

      box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
      background-color: rgba(250, 250, 250, 0.8);
    }
  </style>
</head>

<body>
  <div id="book">
    <div class="book-side"></div>
    <div class="book--cover">CSS 圣经</div>
    <div class="book--content">
      <div class="book--inner">
        <div style="padding-left: 10px">
          <div>~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
        </div>
      </div>
    </div>
  </div>

  <p style="text-align:center">长按书本，即可展开书本</p>
</body>

</html>
子洋丶
关注
  • 25
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超酷逼真的CSS3 3D书本翻页动画
08-23
之前我们分享过好几款风格各异的jQuery书本翻页插件和HTML5书本翻页动画，有几个还是不错的，比如jQuery书本翻页3D动画特效和HTML5 3D书本翻页特效。今天要分享的也是一款基于CSS3的3D书本翻页动画，目前这个动画不支持鼠标交互，只可以自动将页面打开和收拢。
常用的CSS动画效果
happy81997的博客
03-21 2932
【代码】常用的CSS动画效果。
Web前端最全10个值得前端收藏的CSS3动效库（工具），分布式架构演进+相关笔记参考
2301_82243626的博客
05-08 428
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
css动画效果
zongzi494的博客
01-12 276
animate.css
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2499
粒子动效 旋转 弹动
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
css3 绘制书本
weixin_30904593的博客
07-30 183
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>翻书的效果</title> <style> body{ background-color:#A0A0A4; ...
css实现外边框飞线动效
最新发布
05-30
纯css制作box外边框动态效果-飞线效果
CSS3 3D书本悬停浮动特效
07-24
本文将深入探讨“CSS3 3D书本悬停浮动特效”，这是一种利用CSS3的3D变换特性实现的交互式设计，当鼠标悬停在书本图像上时，书本会呈现出上下浮动的视觉效果，增强了用户体验。 首先，我们需要理解CSS3中的3D转换。...
用纯CSS实现页面的扇形展开效果
05-04
内容概要: 使用纯css实现扇形展开效果 能学到什么: css变化, 旋转以及定义旋转的原点 阅读建议: 有一点点css基础的
纯CSS3实现3D旋转书本效果
09-27
而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用，接下来通过本文给大家介绍CSS3实现3D旋转书本效果，需要的朋友一起学习
CSS实现3D书本效果的示例代码
11-20
话不多说，先来看一下效果图 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...
深入浅出 CSS 动画
热门推荐
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
纯css实现翻书效果
nihaio25的博客
11-25 1905
前言：在做一些自己网站的时候，如何封装自己的作品链接，如果直接放，感觉太冰冷，所以需要包装啊，用一本本书，封装自己的作品链接，优雅而不失礼，当然你也可以做一些表白的女朋友的效果，打开书籍，看到的是她。emm,话不多说先看效果图： 这是页面加载出来的效果图。 这是打开书本后的效果，看你自己改哦 你也可以这样： 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
css动画详解
m0_56713342的博客
10-30 1万+
1、使⽤css技术来控制⻚⾯元素css属性的变化。2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）二、过渡1.过渡的理解过渡（transition）[træn'siʒǝn]-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡-需要在某种条件下触发，例如hover、active、focus情况下-⼀次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值。
CSS使用过渡动画实现展开折叠效果
tt1234561009的博客
07-27 6945
前端页面展开/折叠效果可通过v-show控制显示隐藏，但这样页面交互太刻意了，显得不是很顺畅，为了提高用户使用体验感可以使用过渡动画实现平缓地展开折叠效果~
【css】CSS实现翻书效果加载动画
weixin_42582523的博客
01-06 1187
主要利用了svg和c3动画实现翻书加载效果
html 实现3d效果代码,CSS实现3D书本效果的示例代码
weixin_32238435的博客
06-03 250
话不多说，先来看一下效果图源代码如下Document*{margin: 0;padding: 0;}body{display: flex;align-items: center;justify-content: center;width: 100%;min-height: 100vh;background: #333333;background-size: cover;}.book{width: ...
CSS3常用动画效果合集（最全）
2301_79655576的博客
03-29 838
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！opacity:1;opacity:0;opacity:1;/* 翻出-X轴 */opacity:1;opacity:0;自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
css实现水波纹动效
09-12
要实现水波纹动效，可以使用CSS的伪元素和动画属性。 首先，创建一个容器元素，设置其宽高和背景颜色。可以使用伪元素扩展容器的点击区域，将其定位到容器的中心，并设置其尺寸较大。 接下来，使用CSS的动画关键帧来定义水波纹效果。可以设置动画从透明到不透明，并逐渐变大。在动画结束时，将其透明度设为0，使得水波纹消失。 然后，在容器上添加一个点击事件监听器，当用户点击容器时，动态地给伪元素添加一个class，这个class应用了之前定义的动画。这样，在点击容器时，就会产生水波纹的效果。 最后，使用transition属性来设置伪元素的过渡效果，使得水波纹动画平滑过渡。 综上，通过CSS的伪元素和动画属性，可以实现水波纹动效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值