html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效

简单做出HTML5翻页效果文字特效

之前在网上看到一款比较有新意的HTML5文字特效，文字效果是当鼠标滑过是出现翻开折叠的效果，类似书本翻页。于是我兴致勃勃的点开源码看了一下，发现其实实现也挺简单的，主要利用了CSS3的transform属性，分别对X轴、Y轴、Z轴进行翻转，先看一下效果截图。

看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。

接下来我们来看一下源码。首先是HTML代码，非常简单，列出我们需要渲染的文字：

接下来是核心CSS3代码，这里我们略去了控制页面样式的CSS代码，把实现翻页效果文字的CSS代码提取出来。.letter{

display: inline-block;

font-weight: 900;

font-size: 8em;

margin: 0.2em;

position: relative;

color: #00B4F1;

transform-style: preserve-3d;

perspective: 400;

z-index: 1;

}

这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。

接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。(#00b4f1是什么颜色?#00b4f1是蓝色).letter:before, .letter:after{

position:absolute;

content: attr(data-letter);

transform-origin: top left;

top:0;

left:0;

}.letter, .letter:before, .letter:after{

transition: all 0.3s ease-in-out;

}.letter:before{

color: #fff;

text-shadow:

-1px 0px 1px rgba(255,255,255,.8),

1px 0px 1px rgba(0,0,0,.8);

z-index: 3;

transform:

rotateX(0deg)

rotateY(-15deg)

rotateZ(0deg);

}.letter:after{

color: rgba(0,0,0,.11);

z-index:2;

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(0deg)

rotateZ(0deg)

skew(0deg,1deg);

}.letter:hover:before{

color: #fafafa;

transform:

rotateX(0deg)

rotateY(-40deg)

rotateZ(0deg);

}.letter:hover:after{

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(40deg)

rotateZ(0deg)

skew(0deg,22deg);

}

这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母，然后利用transform属性的rotateX，rotateY，rotateZ来翻转，再利用skew来时文字倾斜。

以上就是简单做出HTML5翻页效果文字特效的内容，更多相关内容请关注PHP中文网(www.php.cn)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效相关推荐

HTML5电子书翻页效果代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
html5 制作书架展示 PHP,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志支持手机端触屏滑动翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
【有利可图网】PS教程：制作超级简单的翘边翻页效果
教程通过一些素材来制作一款圣诞节翻页效果海报,整个教程比较简单,刚接触PS的同学们可以尝试着做一下,也是可以学会的,通过教程可以了解一些图层.剪切蒙版.滤镜的一些运用,相信通过教程会对一些设置有所了解 ...
Next FlipBook Maker Pro（h5电子书翻页效果制作软件）官方正式版V2.7.20 | h5翻页杂志制作软件下载
Next FlipBook Maker Pro 是一款优秀实用且酷炫逼真的交互式H5翻页电子杂志制作软件,为广大用户提供了一种将静态PDF文档或图片转换为带有H5翻页效果的数 ...
简单零基础学会H5移动端滑动翻页效果
这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果,我会尽量讲得细一点,让零基础的同学也能学会这个简单的案例. 先来看下html的布局代码: index.html 一个div包 ...
unity 制作书本翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页不使用插件自制实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...
ppt怎么把图片做成翻书效果_ppt怎么做出翻页效果图文教程
怎么才能把ppt做出翻页效果呢?新手不会,上网找怕麻烦,而且教程太乱没有统一的答案怎么办,哪里有更好的方法?下面学习啦小编就为你提供ppt如何做出翻页效果的方法啦! ppt做出翻页效果的方法步骤首先 ...

html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效

html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效相关推荐

最新文章

热门文章