使用html+css实现页面书本翻页特效

2024-12-21 08:36:53

效果：

实现：

1.定义标签，shu是书本，feng是封面，wen是文字内容。

  <div class="shu">
       <div class="feng"></div>
       <div class="wen">
           <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3>
           <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;">
            He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty.            leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
           </p>
       </div>
   </div>

2.定义书本的基本属性，宽高，阴影等，伪类是下面和右面那两条阴影。

.shu{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.774);
            transform-style:  preserve-3d;
            box-shadow:   300px 0px 30px  rgb(0, 0, 0,.6) inset;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
        }
        .shu::after{
            content: '';
            position: absolute;
            height: 3px;
            width: 303px;
            left: 0px;
            bottom: -3px;
           /*  background-color: rgb(100, 96, 96); */
           background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) );
            border-bottom-left-radius: 5px;
        }
        .shu::before{
            content: '';
            position: absolute;
            width: 3px;
            height: 100%;
            right: -3px;
            top: 0px;
            background-color: rgb(112, 108, 108);
           background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
            border-top-right-radius: 3px;
        }

transition: 1s cubic-bezier(.79,.34,.47,.92); 变化时间为1s，运动曲线为 cubic-bezier(.79,.34,.47,.92)，这个可以去一个网站自定义生成：点我。

3.鼠标经过，阴影变化，然后书本向左旋转：

 .shu:hover{
            box-shadow:   30px 0px 30px  rgb(0, 0, 0,.6) inset;
            transform: rotate(-5deg);

        }

transform: rotate(-5deg);旋转；

4.封面的基本样式：

 .feng{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-image: url(4.jpg);
            background-size: 100% ;
            transform-origin: left;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;

        }

transform-origin: left; 封面旋转的位置，旋转点

5.封面旋转：

 .shu:hover .feng{
            transform: rotateY(-140deg);

        }

文本的基本属性：

 .wen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-family: 'fangsong';
            text-align: left;
        }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            background-image: radial-gradient(white,black);

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .shu{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.774);
            transform-style:  preserve-3d;
            box-shadow:   300px 0px 30px  rgb(0, 0, 0,.6) inset;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
        }
        .shu::after{
            content: '';
            position: absolute;
            height: 3px;
            width: 303px;
            left: 0px;
            bottom: -3px;
           /*  background-color: rgb(100, 96, 96); */
           background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) );
            border-bottom-left-radius: 5px;
        }
        .shu::before{
            content: '';
            position: absolute;
            width: 3px;
            height: 100%;
            right: -3px;
            top: 0px;
            background-color: rgb(112, 108, 108);
           background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
            border-top-right-radius: 3px;
        }

        .shu:hover{
            box-shadow:   30px 0px 30px  rgb(0, 0, 0,.6) inset;
            transform: rotate(-5deg);

        }
        .feng{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-image: url(4.jpg);
            background-size: 100% ;
            transform-origin: left;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;

        }
        .shu:hover .feng{
            transform: rotateY(-140deg);

        }

        .wen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-family: 'fangsong';
            text-align: left;
        }
    </style>
</head>
<body>
   <div class="shu">
       <div class="feng"></div>
       <div class="wen">
           <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3>
           <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;">
            He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty.            leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
           </p>
       </div>
   </div>
</body>
</html>

到此这篇关于使用html+css实现页面书本翻页效果的文章就介绍到这了,更多相关html+css书本翻页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

用html+css+js实现的一个简单的图片切换特效

如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a
基于HTML+CSS+JS实现增加删除修改tab导航特效代码

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
html+css+js实现canvas跟随鼠标的小圆特效源码

效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate
使用html+css制作一个发光立方体特效

目录一.话不多,看效果二.实现(附完整代码) 1.定义标签: 2.定义外层盒子css: 3.定义盒子6个面分别的样式: 一.话不多,看效果二.实现(附完整代码) 1.定义标签: <div class="container"> <div class="q1"></div> <div class="h2"></div> <div class="z3">&
5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

目录实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背
2014 HTML5/CSS3热门动画特效TOP10

1.HTML5+CSS3实现的模拟真人奔跑动画特效今天要分享一款很酷的模拟真人奔跑动画,它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的.这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影.更重要的是当人物跑的越来越近是,人物的大小也会随之变大.很像一个小男孩从远处跑过来. 在线演示源码下载 2.jQuery实现的四款支持不同自定义图片切换的焦点图插件特效 jQuery实现的四款支持不同自定义图片切换的焦点图插件特效源码L_slide.js,是一段可以
Android实现翻页特效

本文实例为大家分享了Android实现翻页特效的具体代码,供大家参考,具体内容如下 android-flip是一个能够轻松帮你实现水平以及竖直翻页特效的库,但是在判断翻页的时候有bug,我们需要在FlipCards.java中找到这一段: if (Math.abs(getPageIndexFromAngle(accumulatedAngle + angleDelta) - lastPageIndex) <= 1) { accumulatedAngle += angleDelta;
vue实现书本翻页动画效果实例详解

偶然兴起,想要用vue来做一个书本的组件,有了这个想法后边开始动手,先简单地实现基本的效果,为后续封装为组件进行准备工作,实现该效果的要使用vue + css + JavaScript. 关键字 transform Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 语法为transform: none|*transform-functions*; 我们主要使用到其旋转效果,我们可以这样写. transform: rotateY(90deg) //表
JQuery插件iScroll实现下拉刷新，滚动翻页特效

JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
jquery实现键盘左右翻页特效

jquery键盘左右翻页,jquery键盘方向键翻页功能,当无上一篇或者下一篇的时候,按键盘将会没什么反应,避免错误跳转. HTML代码 <p>上一篇:<a id='pre' href='http://www.daimajiayuan.com/sitejs-17294-1.html'>一款随滚动条下滑左右渐入的页面布局</a> </p> <p>下一篇:<a id='next' href='http://www.daimajiayuan.co
jQuery实现按键盘方向键翻页特效

1.jQuery代码: 复制代码代码如下: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); var nextpage=$("#next").attr("href"); $("body").keydown(function(event){ if(event.keyCode==37 &am
实例讲解iOS中的UIPageViewController翻页视图控制器

一.引言 UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图. UIPageViewController在iOS 5 SDK中首次引入,它使得开发者可以使用这个ViewController创建分页视图.在iOS 6中,这个类有了更新,支持滚动过渡效果.使用Page View,用户可以方便的通过手势在多个页面之间导航.UIPageViewContro
jquery带翻页动画的电子杂志代码分享

这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐? 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果.书本的内容支持任意HTML元素,相当灵活. 运行效果图 --------------------------------查
javascript移动端电子书翻页效果实现代码

这篇文章主要介绍了javascript移动端电子书翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果 1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q
python 爬取马蜂窝景点翻页文字评论的实现

使用Chrome.python3.7.requests库和VSCode进行爬取马蜂窝黄鹤楼的文字评论(http://www.mafengwo.cn/poi/5426285.html). 首先,我们复制一段评论,查看网页源代码,按Ctrl+F查找,发现没有找到评论,说明评论内容不在http://www.mafengwo.cn/poi/5426285.html页面. 回到页面,划到评论列表,右键检查,选择Network,然后点击后一页翻页,观察Network里的变化,我们要爬的文件就在下面的某个文件
基于Android实现3D翻页效果

最近做了一个简单的3D效果翻页特效,先说说我的思路吧,首先我这个翻页效果并不是两个Activity之间的跳转,而是在同一个activity类切换不同的view而已.我现在的做法是单击一个button然后Gone当前的布局,然后把需要呈现的布局visible,在隐藏当前布局的时候启动动画,然后给动画添加监听,在动画结束时开始另外一个view的入场动画就行了. 下面来看下我的主页面的布局文件: <FrameLayout xmlns:android="http://schemas.android