你想问的应该是，在搭建一个HTML文件时，基本的文件结构是什么样子吧？
标准的HTML文件由“文档声明、文件头、文件体”组成。
对于HTML5，文档声明也应该采取HTML5.0的声明方式，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂（码匠） & 言成科技 联合出品</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<div>具体内容</div>
</body>
</html>
在html标签当中包含head标签和body标签两种，而head标签表示的是文件头，body标签表示文件体，文件头当中需要包含“字符编码”（head标签中的第一行）、“标题”（title标签）、“其他元信息”（除了字符编码外的其他meta），而文件体当中书写的具体代码就是在网页当中会显示的内容。
此外，在文件头部或文件体当中还可以使用link标签引入CSS文件，或者使用script标签引入JS文件。
关于文档声明，在传统的HTML4当中，有另外三种声明方法，请详见《文档声明 DOCTYPE常见的文档类型》
HTML5新标签canvas来绘制文本文字可以这样做：Shadows API 。
API 的属性为：
shadowColor：阴影颜色。其值和 CSS 颜色值一致。
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量
下面是HTML5代码部分
context.shadowOffsetX = 5
context.shadowOffsetY = 5
context.shadowBlur= 4
context.shadowColor = ‘rgba(255, 0, 0, 0.5)’
context.fillStyle = ‘#00f’
context.fillRect(20, 20, 150, 100)
首先是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)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）