澳门新浦京娱乐游戏6个超炫酷的HTML5电子书翻页动画

本文由码农网 –
小峰原创,转发请看清文末的转发必要,招待参预我们的付费投稿布署!

言听谋决大家自然境遇过部分E-BOOK网址,大家得以因此像看书同样翻页来浏览E-BOOK的原委。明日大家要分享的HTML5行使跟E-BOOK翻页有关,大家挑选出来的6个电子书翻页动画都丰裕炫目,何况都提供源码下载,有亟待的情人能够下载使用。

本文由码农网 –
小峰原创,转发请看清文末的转载必要,应接参预我们的付费投稿布署!

澳门新浦京娱乐游戏 ,那是风度翩翩款极度炫人眼目的HTML5
3D书本翻页动漫,效果相对比较简单,拖拽鼠标模拟用手翻页,更理想的是翻页进度中,显示出逼真的3D立体效果。书本中的文字和图片也会3D展现,超帅。

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

明日要分享的那款jQuery书本翻页3D动漫效果更压实硬,能够支持恣意数量页的阅读,况且也会有分外雅观的视觉效果。书本的剧情扶持跋扈HTML成分,格外灵活。

澳门新浦京娱乐游戏 1

在线演示

源码下载

现行反革命的Web页面已经更加的走向高档化和易操作化,jQuery的雅量使用,让Web开辟者更易于领会前端页面包车型地铁垄断(monopolyState of Qatar,HTML5的引入也更让网址页面包车型大巴成分生动富有活力。本文首要向大家享用部分方可让页面特别分明的HTML5/jQuery动漫插件,作为规划参照。

澳门新浦京娱乐游戏 2

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

今日我们要享用风华正茂款酷炫况兼实用的CSS3动漫效能,它是仿照书本翻页的卡通片特效。当鼠标滑过书籍右上角时,书本就能够向前翻一页,何况翻页动画特别逼真。由于CSS3的运用,大家并无需使用复杂的图片来成立逼真的书本效果,书本翻页可以很简短地实现。

澳门新浦京娱乐游戏 3

在线演示

源码下载

1、HTML5 Canvas完毕会跳舞的光阴动漫

那款HTML5卡通非常常好玩,首先它的原型是四个石英钟,可是canvas手艺的运用,让那个石英钟没接触意气风发秒都会发出圆球散落的卡通片特效,特别的酷。

澳门新浦京娱乐游戏 4

在线演示源码下载

在线演示源码下载

3、HTML5E-BOOK翻页动漫特效

今日大家要来共享意气风发款相当的帅的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卡塔尔国为回看莱斯·Paul而规划的谷歌首页Logo,试试那把电吉他吧,扶持键盘哦。

澳门新浦京娱乐游戏 12

在线演示源码下载

6、HTML5街口霸王游戏

那款优秀的街机游戏也早就用HTML5兑现的,效果特别逼真,你可以依据提醒的开关举行游戏体验。

澳门新浦京娱乐游戏 13

在线演示源码下载

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

那是三个基于jQuery的3D书本翻页动漫效果,翻页效果特别马到功成。

澳门新浦京娱乐游戏 14

在线演示源码下载

8、HTML5/CSS3提醒框动漫 带进程条

那款提醒框动漫在现身和消退的时候能够有淡入淡出的动漫特效,何况提示框内置叁个进度条,走完进程条时提醒框就能够收敛。

澳门新浦京娱乐游戏 15

在线演示源码下载

应接分享越多的HTML5和jQuery等休戚相关的Web开垦财富,希望本文能够对您持有助于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注