只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
类别:Web前端 浏览量:2747
时间:2021-10-10 00:32:20 只用html5简单动画代码
HTML5 3D书本翻页动画的实现示例这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。
HTML代码
<li class="back-cover p3d"> <li class="page back flip"></li> <li class="page front p3d"> <li class="shadow"></li> <li class="dino"></li> </li> </li> <li class="front-cover p3d"> <li 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> </li> <li class="page back"></li> </li> </li>
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.jpg" alt="只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)" border="0" />
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基本结构图(HTML5中的网络存储实现方式)
- html5的文件类型声明(浅析HTML5中的download属性使用)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- HTML5离线缓存
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- vue加载html5动画(vue实现旋转木马动画)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
- html5新增全局属性(HTML5自定义属性的问题分析)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5怎么设置左边input(HTML5中input输入框默认提示文字向左向右移动的示例代码)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
- 秦海璐一袭旗袍惹人倾心,将高级与淡雅展现的游刃有余(秦海璐一袭旗袍惹人倾心)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9