威尼斯手机平台登陆-官方网站登录

威尼斯手机平台登陆为您带来世界三大博彩公司最新相关资讯,威尼斯官方网站登录充分考虑到不同地域网民的不同需求,威尼斯手机平台登陆良好的用户界面,人性化的操作,实用的功能设计使其广泛受到欢迎,推动实体出版、影视、动漫、游戏等相关文化产业的发展。

您的位置:威尼斯手机平台登陆 > 前端资源 > 付费投稿计划,我们可以通过像看书一样翻页来浏览电子书的内容

付费投稿计划,我们可以通过像看书一样翻页来浏览电子书的内容

发布时间:2020-04-21 17:03编辑:前端资源浏览(70)

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容。今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的朋友可以下载使用。

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

    这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。

    1、jQuery书本翻页3D动画特效

    今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果。书本的内容支持任意HTML元素,相当灵活。

    图片 1

    在线演示

    源码下载

    现在的Web页面已经越来越走向高端化和易操作化,jQuery的大量应用,让Web开发者更容易驾驭前端页面的控制,HTML5的引入也更让网站页面的元素生动富有活力。本文主要向大家分享一些可以让页面更加引人注目的HTML5/jQuery动画插件,作为设计参考。

    图片 2

    2、CSS3书本翻页动画 书本翻页效果逼真

    今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时,书本即可向前翻一页,而且翻页动画非常逼真。由于CSS3的运用,我们并不需要使用复杂的图片来制造逼真的书本效果,书本翻页可以很简单地完成。

    图片 3

    在线演示

    源码下载

    1、HTML5 Canvas实现会跳舞的时间动画

    这款HTML5动画非常有意思,首先它的原型是一个时钟,但是canvas技术的使用,让这个时钟没走动一秒都会产生圆球散落的动画特效,非常的酷。

    图片 4

    在线演示源码下载

    在线演示源码下载

    3、HTML5电子书翻页动画特效

    今天我们要来分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。

    图片 5

    在线演示

    源码下载

    2、CSS3 3D折叠翻转文字动画

    这个CSS3文字特效也比较有趣,只要鼠标滑过文字,就会产生3D的折叠效果。

    图片 6

    在线演示源码下载

    HTML代码

    <div class="book p3d">
        <div class="back-cover p3d">
            <div class="page back flip"></div>
            <div class="page front p3d">
                <div class="shadow"></div>
                <div class="dino"></div>
            </div>
        </div>
        <div class="front-cover p3d">
            <div class="page front flip p3d">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p>
            </div>
            <div class="page back"></div>
        </div>
    </div>
    

    4、HTML5 3D书本翻页特效 3D效果比较漂亮

    利用HTML5和CSS3实现3D效果真的非常方便,下面这款书本翻页特效就很好地利用了HTML5的3D特性。鼠标拖拽书本页面即可翻动页面,在翻页的过程中整本书还呈现出3D立体的效果,包括书本中的图片也十分立体。

    图片 7

    在线演示

    源码下载

    3、HTML5火球挡板碰撞动画游戏

    这是一个HTML5小游戏,利用挡板让小球在浏览器内侧不断反弹,这利用了物理学的反射原理,在这个例子中用HTML5实现了。

    图片 8

    在线演示源码下载

    CSS代码

    .book {
        width: 300px;
        height: 300px;
        margin-top: -150px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: rotateX(60deg);
        -moz-transform: rotateX(60deg);
        -ms-transform: rotateX(60deg);
        -o-transform: rotateX(60deg);
        transform: rotateX(60deg);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    .page {
        width: 300px;
        height: 300px;
        padding: 1em;
        position: absolute;
        left: 0;
        top: 0;
        text-indent: 2em;
    }
    .front {
        background-color: #d93e2b;
    }
    .back {
        background-color: #fff;
    }
    .front-cover {
        cursor: move;
        -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);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .front-cover .back {
        background-image: url(mdn.png);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        -webkit-transform: translateZ(3px);
        -moz-transform: translateZ(3px);
        -ms-transform: translateZ(3px);
        -o-transform: translateZ(3px);
        transform: translateZ(3px);
    }
    .back-cover .back {
        -webkit-transform: translateZ(-3px);
        -moz-transform: translateZ(-3px);
        -ms-transform: translateZ(-3px);
        -o-transform: translateZ(-3px);
        transform: translateZ(-3px); 
    }
    .p3d {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .flip {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    .dino,
    .shadow {
        width: 196px;
        height: 132px;
        position: absolute;
        left: 60px;
        top: 60px;
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .dino {
        background: url(dino.png) no-repeat;
    
    }
    .shadow {
        background: url(shadow.png) no-repeat;
    }
    

    5、HTML5/CSS3书本翻页3D动画

    前段时间我们分享过很多牛叉的HTML5动画,如果你对HTML5感兴趣,可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画,当我们将鼠标滑过书本时,书本就会自动一页页翻过去,书本的3D效果非常不错。

    图片 9

    在线演示

    源码下载

    4、jQuery/CSS3图片翻转特效 可水平垂直翻转

    这是一款基于jQuery和CSS3的图片翻转特效,每一张图片都有文字标题悬浮在图片上,点击切换按钮,每一张图片均会进行水平或者垂直翻转,翻转效果非常酷,有3D立体的视觉效果。

    图片 10

    在线演示源码下载

    JavaScript代码

    (function (window, document) {
    
        var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''],
            book = document.querySelectorAll('.book')[0],
            page = document.querySelectorAll('.front-cover')[0],
            dino = document.querySelectorAll('.dino')[0],
            shadow = document.querySelectorAll('.shadow')[0],
            hold = false,
            centerPoint = window.innerWidth / 2,
            pageSize = 300,
            clamp = function (val, min, max) {
                return Math.max(min, Math.min(val, max));
            };
    
        page.onmousedown = function () {
            hold = true;
        };
    
        window.onmouseup = function () {
            if (hold) {
                hold = false;
            }
        };
    
        window.onresize = function () {
            centerPoint = window.innerWidth / 2;
        };
    
        window.onmousemove = function (evt) {
            if (!hold) {
                return;
            }
    
            var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0),
                i, j;
    
            for (i = 0, j = prefixes.length; i < j; i++) {
                book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)';
                page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)';
                dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)';
                shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)';
            }
        };
    
    })(window, document);
    

    在线演示源码下载

    以上就是HTML5 3D书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。

    6、jQuery/CSS3书本翻页动画特效

    这是一款基于jQuery和CSS3的书本翻页动画特效,该书本翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页,也可以使用鼠标拖拽页脚来实现翻页动画。这是个jQuery插件,因此兼容性还不错。

    图片 11

    在线演示

    源码下载

    本文固定链接: 

    5、HTML5 Canvas Google电吉他

    这是Google为纪念莱斯·保罗而设计的Google首页Logo,试试这把电吉他吧,支持键盘哦。

    图片 12

    在线演示源码下载

    6、HTML5街头霸王游戏

    这款经典的街机游戏也已经用HTML5实现的,效果非常逼真,你可以根据提示的按键进行游戏体验。

    图片 13

    在线演示源码下载

    7、jQuery书本翻页3D动画特效

    这是一个基于jQuery的3D书本翻页动画效果,翻页效果十分流畅。

    图片 14

    在线演示源码下载

    8、HTML5/CSS3提示框动画 带进度条

    这款提示框动画在出现和消失的时候可以有淡入淡出的动画特效,并且提示框内置一个进度条,走完进度条时提示框即可消失。

    图片 15

    在线演示源码下载

    欢迎分享更多的HTML5和jQuery等相关的Web开发资源,希望本文可以对你有所帮助。

    本文由威尼斯手机平台登陆发布于前端资源,转载请注明出处:付费投稿计划,我们可以通过像看书一样翻页来浏览电子书的内容

    关键词: