澳门新浦京娱乐游戏HTML5 3D书本翻页动画

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

澳门新浦京娱乐游戏 1

澳门新浦京娱乐游戏 2

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

这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效、HTML5焦点图特效、CSS3/HTML5进度条特效等类型,一起来看看吧。

HTML5凭借着其强大的3D渲染能力,让很多开发者都跃跃欲试,都想亲自体验一下HTML5的3D效果。今天本文就分享8款效果惊艳的HTML5
3D动画,您可以捡现成的看看,顺便也可以学习学习HTML5的相关知识。1、HTML5
WebGL水面水波荡漾特效
这是一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。在线演示
/ 源码下载2、HTML5 Canvas
3D旋转物体动画,模糊发光特效
今天要介绍的这款HTML5
3D动画是一个旋转的物体,并且利用CSS3的特性,物体会发出模糊和发光的动画特效,旋转起来效果特别酷。在线演示
/ 源码下载3、HTML5 3D旋转图片相册,可鼠标悬停这款HTML5
3D旋转图片相册又非常绚丽,是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。在线演示
/ 源码下载4、HTML5 3D衣服摆动特效这是一款HTML5
3D衣服摆动动画特效,动画也是在HTML5
Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。在线演示
/ 源码下载5、HTML5
3D立方体阵列,有规律的旋转动画
这是一款基于HTML5的3D立方体动画特效,特别的是,它不是一个立方体,而是由多个立方体组成的立方体阵列,同时阵列中的每一个立方体都会有规律的旋转,从而产生很酷的动画效果。在线演示
/ 源码下载6、HTML5 3D手掌动画,看起来很抽象这是一款很酷的HTML5
3D动画,它是用一个个像素点构造的3D立体手掌动画,你可以拖动鼠标从不同的侧面观看这只非常抽象的手掌。在线演示
/
源码下载7、HTML5/CSS3书本翻页3D动画这是一款基于HTML5和CSS3的书本翻页3D动画,当我们将鼠标滑过书本时,书本就会自动一页页翻过去,书本的3D效果非常不错。在线演示
/ 源码下载8、HTML5 3D阴影文字特效这是一款非常简单大气的HTML5
3D文字特效,这个3D文字特效是通过文字加粗以及文字阴影来实现的,效果非常不错。在线演示
/ 源码下载以上就是8款效果惊艳的HTML5 3D动画,欢迎收藏分享。

澳门新浦京娱乐游戏 3

1、CSS3/jQuery全屏立体焦点图 时尚大气

在线演示源码下载

jQuery是一个非常流行的Javascript框架,今天我们要分享一款基于jQuery和CSS3的焦点图动画,该jQuery焦点图插件是全屏立体的效果,看上去非常时尚和大气。而且,焦点图在图片滑动的时候非常流畅,性能应该也还不错。

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>

在线演示 源码下载

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;
}

2、HTML5/CSS3文字投影特效 乳白阴影文字效果

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书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。

之前向大家分享过一款HTML5
Canvas字母文字颗粒动画,效果非常不错,由此可见,利用HTML5和CSS3可以方便的实现很多以前很难实现的文字特效。今天我要向大家介绍一款HTML5/CSS3文字投影特效,它的使用也很简单,HTML5文字阴影效果也比较酷。

在线演示 源码下载

3、HTML5/CSS3实现旋转图片播放焦点图 旋转比较流畅

HTML5焦点图可以实现很多炫酷的效果,就像这款CSS3百叶窗焦点图特效就很不错。今天我们再来分享一款另外一种效果的HTML5焦点图插件,该焦点图利用CSS3的属性实现了图片旋转的动画效果,既可以顺时针旋转,也可以逆时针旋转,并且图片旋转也比较流畅。

在线演示 源码下载

4、HTML5 Canvas Google电吉他 支持键盘弹奏

这是当年Google为纪念莱斯·保罗而设计的Google首页Logo,它利用HTML5技术实现了电吉他弹奏效果。这款HTML5电吉他不仅可以鼠标滑过琴弦发出音乐声,而且可以利用键盘来弹奏出美妙的乐章,懂音律的朋友可以弹奏一下试试。

在线演示 源码下载

5、HTML5 Canvas字母文字颗粒动画 可设置重力感应

网页文字在一般情况下只能设置颜色、大小、粗细等基本的特征,但是利用HTML5技术,我们可以让网页文字变得更加绚丽和动感。今天要分享的这款HTML5
Canvas字母文字动画效果很不错,它可以让26个英文字母实现颗粒跳动的效果,你不仅可以设置需要播放动画的字母,也可以设置不同的效果方式,而且也可以设置重力感应效果,是一款非常不错的HTML5文字特效。

在线演示 源码下载

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

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

在线演示 源码下载

7、HTML5折线图表Aristochart 图表配置简单

之前我已经向大家分享了几款HTML5图表应用,HTML5
Canvas图表应用RGraph、HTML5
Canvas饼状图表。利用这些HTML5图表可以很方便的展示各种数据,而且非常直观。今天要向大家分享一款HTML5折线图表插件Aristochart,Aristochart扩展非常灵活,配置也比较简单,是一款很实用的HTML5图表应用。

在线演示1 在线演示2 在线演示3 在线演示4 源码下载

8、CSS3 Loading进度条加载动画特效 3款绚丽风格

前面我向大家分享了几款非常漂亮的CSS3进度条插件,CSS3 SVG 进度条 Loading
动画、纯CSS3进度条
华丽5色进度条示例。今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的。

在线演示 源码下载

好了,以上这8款绚丽而又实用的HTML5/CSS3最新应用应该能帮助到你的开发上,欢迎收藏分享。

本文由html5tricks收集整理,转载请务必保留原文链接

发表评论

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