正文
html5文字特效,css 文字特效
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么制作html5渐显的文字提示效果
html
head
title网页特效-文本特效-渐显的文字提示效果/title
FCK:meta http-equiv="content-Type" content="text/html;charset=gb2312" /
!--把下面代码加到head与/head之间--
style type="text/css"
.lookMe{
float:left;
margin-right:10px;
padding:5px;
width:90px;
color:#0099FF;
cursor:pointer;
background:#FFFADC;
border:1px solid #CC6600;
}
.lookMe span{
display:none;
position:absolute;
padding:5px;
width:200px;
color:#CC3300;
background:#FFFADC;
border:1px solid #CC6600;
filter:alpha(opacity=0);
}
/style
/head
body
!--把下面代码加到body与/body之间--
div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22"闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
span1、雅虎体育讯 北京时间6月23日，欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。/span
/div
div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22"闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
span2、在一场四分之一决赛中……/span
/div
div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22"闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
span3、欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。/span
/div
script
var span,timer1;
function lookMe(thisTag){
span = thisTag.getElementsByTagName('span')[0];
span.style.display = 'block';
span.filters[0].opacity=0;
timer1=setInterval("showme()",10)
thisTag.onmouseout = function(){
span.style.display = 'none';
}
}
function showme()
{
if(span.filters[0].opacity==80){clearInterval(timer1)}
span.filters[0].opacity++
}
function mouseMove(event){
var xx=event.clientX + 5;
var yy=event.clientY + 10;
var obj = event.srcElement ? event.srcElement : event.target;
var span=obj.getElementsByTagName("span")[0];
span.style.left = xx + 'px';
span.style.top = yy + 'px';
}
/script
/body
/html
[img]相关问答
Q1: HTML5翻页效果文字特效怎么实现
首先是HTML代码，非常简单，列出我们需要渲染的文字：
div class="foo"
span class="letter" data-letter="A"A/span
span class="letter" data-letter="B"B/span
span class="letter" data-letter="C"C/span
span class="letter" data-letter="D"D/span
span class="letter" data-letter="E"E/span
span class="letter" data-letter="F"F/span
span class="letter" data-letter="G"G/span
span class="letter" data-letter="H"H/span
span class="letter" data-letter="I"I/span
span class="letter" data-letter="L"L/span
span class="letter" data-letter="M"M/span
span class="letter" data-letter="N"N/span
span class="letter" data-letter="O"O/span
span class="letter" data-letter="P"P/span
span class="letter" data-letter="Q"Q/span
span class="letter" data-letter="R"R/span
span class="letter" data-letter="S"S/span
span class="letter" data-letter="T"T/span
span class="letter" data-letter="U"U/span
span class="letter" data-letter="V"V/span
span class="letter" data-letter="Z"Z/span
/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);
}
Q2: html5有哪些新特性
语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性（Class: OFFLINE STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性（Class: Performance Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
Q3: HTML5模仿黑客帝国文字矩阵特效，怎么样可以确定文字显示
!DOCTYPE html
html
head
title黑客帝国效果/title
/head
body
canvas id="canvas"/canvas
style type="text/css"
body{margin: 0;
padding: 0;
overflow: hidden;}
/style
script type="text/javascript"
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var texts = '0123456789'.split('');
var fontSize = 16;
var columns = canvas.width/fontSize;// 用于计算输出文字时坐标，所以长度即为列数
var drops = [];//初始值
for(var x = 0; x columns; x++){
drops[x] = 1;
}
function draw(){
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';//逐行输出文字
for(var i = 0; i drops.length; i++){
var text = texts[Math.floor(Math.random()*texts.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize canvas.height || Math.random() 0.95){
drops[i] = 0;
}
drops[i]++;}}
setInterval(draw, 33);
/script
/body
Q4: html5 canvas的文字特效怎么写
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
实例
使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
使用 strokeText():
实例
使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
参考来源：HTML5 Canvas_w3cschool
