css3实现书本翻页效果

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量1.3w 收藏 5
点赞数 2
文章标签： javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51364599/article/details/111561961
版权

css3翻页效果

关键要点：
1.css3 3d动画的掌握
2.如何解决翻转后页面内容的改变
3.如何保持书本一直处于居中位置

  1. 代码总览
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .book{
   
        margin: auto;
        margin-top: 2rem;
        transform: translate(0,0);
        perspective: 5000px;
        max-width: 40%;
        height: 800px;
        position: relative;
        transition:all 1s ease;
    }
    .page{
   
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background-color: pink;
        cursor: pointer;
        transition:all 1s ease;
        transform-origin: left center;
        transform
最低0.47元/天 解锁文章
no bug no life
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3 3D转换实现书本翻页效果
qq_31888873的博客
03-27 428
最简单的翻页效果实现。之前找了别人做好的代码看了一下，但是有点小复杂，虽然效果很好看，但是可能一开始看不太懂，所以做了个最简易版的。 简单易懂，css里面的注释的地方是我自己一开始走的弯路，所以建议看之前最好要先仔细学习下3D转换的各个属性。 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="
html 实现多页面翻页,css3实现书本翻页效果的示例代码
weixin_39727336的博客
06-03 888
关键要点：1.css3 3d动画的掌握2.如何解决翻转后页面内容的改变3.如何保持书本一直处于居中位置代码总览Document.book{margin: auto;margin-top: 2rem;transform: translate(0,0);perspective: 5000px;max-width: 40%;height: 800px;position: relative;transit...
使用CSS制作一个简单的翻书效果
qq_58281352的博客
05-11 567
*transform-origin用于设置动画的基点(中心点),默认点是元素的中心点*//*preserve-3d表示所有子元素在3D空间中呈现*//*旋转rotate*/
css实现3D书本翻页动画
weixin_46249441的博客
12-08 2686
先看下效果： 完整代码如下： 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.
css3的书本翻页效果
热门推荐
xiaopeng2493的博客
01-08 1万+
最近我们网站要上线一个页面，要做一个轮播。我一般接触的轮播，都是淡入淡出或者左右切入切出，那天产品说要做一个书的翻页的效果，就是书从一角掀起然后向着一个方向走的效果。跟带我的同事对了一下，他跟我说做一个淡入淡出的效果就可以了，太复杂的效果浏览器的兼容性很麻烦。话虽如此，但还是查了一下，并且尝试实现了一个demo，不过自己的空间想象能力太差... 最后的结果是参照这个示例来做的，最后我做出来的效果
css3实现翻书特效
qq_39285178的博客
11-05 958
<!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>Do.
HTML css实现翻页效果,关于CSS3实现翻页特效
weixin_42367148的博客
06-04 466
为什么我的代码我检查了几遍，还是没有翻页的效果，麻烦哪位帮帮我，而且我不知道为什么翻页的默认数字是3，不应该curIndex的值是1页面最初默认显示的是page1的内容1吗？制作翻页效果#my3dpage{-webkit-perspective:800px;-webkit-perspective-origin:50% 50%;overflow: hidden;}#pagegroup{width:4...
Css实现书本翻页效果
qq_42483491的博客
04-15 4041
//样式++ <style> body { background-color: #eaf0f2; } h1 { font-size: 14px; font-family: "Microsoft Yahei";text-align: center; } .paper { position: relative; width: 500px...
css实现翻页
weixin_52099241的博客
05-06 2159
css实现翻页特效
CSS3-实现翻书效果
ogisreal的博客
12-24 1502
CSS3简单特效–transform实现翻书效果 上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。 在这里插入图片描述 可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步： 1、父级中加入视距：perspective:800px; 2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d; 3、设置观看
纯CSS3书本打开翻页特效
07-28
本知识点主要聚焦于“纯CSS3书本打开翻页特效”，这是一种利用CSS3的关键帧动画（keyframes）属性来实现的动态效果，使得网页上的元素能够模拟真实书本的翻页动作，为用户带来更丰富的交互体验。 首先，我们了解CSS...
纯css3书本翻页动画特效
09-08
【纯CSS3书本翻页动画特效】是一种利用现代浏览器对CSS3特性的支持，实现的仿真实体书本翻页效果。这种特效通常用于网页设计中，为用户提供更加直观和交互性强的阅读体验，常见于电子图书、在线文档或者展示类网站。...
CSS3 3D书本翻页动画效果.zip
07-11
代码片段： ---------------------------------------------------- <body>[removed][removed]  <!-- Please heart it if you like! --> ... <div id='top'></div>  <div id='front'></div> ...
html+css翻页动画效果
01-27
然后，利用CSS3的transform属性来实现翻页效果。翻页动画通常涉及到旋转和平移，我们可以使用`transform: rotateY()`和`transform-origin`来实现3D翻转效果。例如： ```css .page { perspective: 1000px; /* 创建...
CSS3实现书本自动翻页特效.rar
10-01
【标题】"CSS3实现书本自动翻页特效.rar"是一个使用CSS3技术来创建书本翻页效果的代码资源。这种特效常用于模拟真实的图书阅读体验，为网页添加互动性和趣味性。CSS3是层叠样式表的第三版，引入了许多新的功能，如...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 640
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1321
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 859
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
css3 js 书本翻页
05-21
您可以通过以下步骤实现CSS3和JavaScript书本翻页效果： 1. HTML 结构 首先，我们需要一个包含左右两个页面的HTML结构。我们可以使用一个 `<div>` 元素来表示整个书本，两个 `<div>` 元素来表示左右两个页面。代码如下： ```html <div class="book"> <div class="page left"></div> <div class="page right"></div> </div> ``` 2. CSS 样式 接下来，我们需要为页面添加一些基本的 CSS 样式，例如设置页面的宽度、高度、边框等。然后，我们使用 CSS3 的 `transform` 属性来实现翻页效果。代码如下： ```css .book { position: relative; width: 600px; height: 400px; border: 1px solid #ccc; margin: 50px auto; } .page { position: absolute; top: 0; bottom: 0; width: 50%; height: 100%; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; transition: transform 0.5s ease-in-out; } .left { left: 0; transform-origin: right center; } .right { right: 0; transform-origin: left center; } ``` 在上面的代码中，我们使用了 `transition` 属性来使页面平滑地翻转。我们还使用了 `transform-origin` 属性来指定翻转的原点。 3. JavaScript 代码 最后，我们需要使用 JavaScript 代码来实现翻页效果。我们可以使用 `click` 事件监听器来监听用户单击页面的事件。然后，我们使用 `transform` 属性来旋转页面。代码如下： ```javascript var book = document.querySelector('.book'); var leftPage = document.querySelector('.left'); var rightPage = document.querySelector('.right'); book.addEventListener('click', function() { if (leftPage.classList.contains('flipped')) { leftPage.classList.remove('flipped'); rightPage.classList.remove('flipped'); } else { leftPage.classList.add('flipped'); rightPage.classList.add('flipped'); } }); ``` 在上面的代码中，我们使用了 `classList` 属性来添加或删除 `flipped` 类，以实现页面翻转效果。 完整代码演示：https://codepen.io/pen/?template=LYEYJxX
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值