HTML5翻页效果文字特效怎么实现_随笔

首先是HTML代码，非常简单，列出我们需要渲染的文字：

A

B

C

D

E

F

G

H

I

L

M

N

O

P

Q

R

S

T

U

V

Z

</div> CSS3

.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来渲染。

接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。

.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)

}

在HTML文件中添加网页特效代码，一般有三种情况。

第一，只加在HTML文件头部，即HTML文件中<head>……</head>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。

第二，只加在HTML文件体部。即HTML文件中<body>……</body>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。如在你题目中提到的就属于这一类。

除上述情况外，多数代码需要先在头部（<head>……</head>之间）在上一些属性性质的代码，但是特效的主代码需要添加在体部（body>……</body>之间），否则，特效不能正常显示，有时还会出现错误，影响整个页面的正常显示。

添加特效代码的方法：

先要用HTML编辑软件，如常见的文本编辑器“记事本”，打开需要编辑的文件，根据特效代码的要求，在文件中找到相应位置，复制，粘贴特效代码，保存即可。修改完毕后，即可在浏览器中看到相应的效果。

在添加的时候一定要注意，一定要按照特效源码的要求添加，此外，还要保证源码的完整性，一个标点符号都不能少，也不能多。

另外要说的是，根据我的经验，直接从网上复制来的代码，不一定都能直接粘贴了用，一部分必须通过一个软件来中转。比如，先把网上的代码复制后，粘贴到“记事本”中，然后再复制、粘贴到相应的文件位置上。

最后，介绍你几个经典网页特效站。

1、网页特效集锦：http://www.helpor.net

2、javascript网页特效：http://www.baron.com.cn/javascript

3、万旭网页特效：http://js.wanxu.com

4、网页特效梦工厂：http://www.zlce.net/web

5、网页制作大宝库网页特效大全：http://www.dabaoku.com/texiao

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout( update, 1000/30)

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height)

其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

<!DOCTYPE html>

<html>

<head>

<title>Canvas Mouse Event Demo</title>

var ctx = null // global variable 2d context

var started = false

var mText_canvas = null

var x = 0, y =0

var frame = 0 // 22 5*5 + 2

var imageReady = false

var myImage = null

var px = 300

var py = 300

var x2 = 300

var y2 = 0

window.onload = function() {

var canvas = document.getElementById("animation_canvas")

console.log(canvas.parentNode.clientWidth)

canvas.width = canvas.parentNode.clientWidth

canvas.height = canvas.parentNode.clientHeight

if (!canvas.getContext) {

console.log("Canvas not supported. Please install a HTML5 compatible browser.")

return

}

// get 2D context of canvas and draw rectangel

ctx = canvas.getContext("2d")

ctx.fillStyle="black"

ctx.fillRect(0, 0, canvas.width, canvas.height)

myImage = document.createElement('img')

myImage.src = "../robin.png"

myImage.onload = loaded()

}

function loaded() {

imageReady = true

setTimeout( update, 1000/30)

}

function redraw() {

ctx.clearRect(0, 0, 460, 460)

ctx.fillStyle="black"

ctx.fillRect(0, 0, 460, 460)

// find the index of frames in image

var height = myImage.naturalHeight/5

var width = myImage.naturalWidth/5

var row = Math.floor(frame / 5)

var col = frame - row * 5

var offw = col * width

var offh = row * height

// first robin

px = px - 5

py = py - 5

if(px < -50) {

px = 300

}

if(py < -50) {

py = 300

}

//var rate = (frame+1) /22

//var rw = Math.floor(rate * width)

//var rh = Math.floor(rate * height)

ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height)

// second robin

x2 = x2 - 5

y2 = y2 + 5

if(x2 < -50) {

x2 = 300

y2 = 0

}

ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height)

}

function update() {

redraw()

frame++

if (frame >= 22) frame = 0

setTimeout( update, 1000/30)

}

</script>

</head>

<body>

<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>

<pre>Play Animations</pre>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/8357441.html

HTML5翻页效果文字特效怎么实现

发表评论

评论列表（0条）