<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="common.css" />
<style type="text/css">
th,td {
height: 30px;
/*border: #808080 solid 1px;*/
}
input {
font-family: Consolas;
font-size: 10px;
height: 20px;
}
#overlay {
height: 100%;
width: 300px;
background: url(./image/img18.jpg) center center no-repeat;
}
#overlay div {
height: 100%;
width: 100%;
background: url(./image/img19.jpg) center center no-repeat;
opacity: 0;
}
#overlay:hover div {
opacity: 1;
transition: all ease-in 0.8s;
}
#rotate {
-ms-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
transform: rotate(-7deg);
width: 100px;
height: 100px;
background: blue;
-moz-transition: -moz-transform 2s;
-webkit-transition: -webkit-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
#rotate:hover {
-ms-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
}
.myanimation {
animation: myanimation_move 3s infinite;
-webkit-animation: myanimation_move 3s infinite; /*Safari and Chrome*/
}
@keyframes myanimation_move {
from{width:60%;}
to{width: 100%;}
}
@-webkit-keyframes myanimation_move { /*Safari and Chrome*/
from{width:60%;}
to{width: 100%;}
}
</style>
</head>
<body>
<form id="html5form" method="post" action="" enctype="application/x-www-form-urlencoded"></form>
<table border="0" cellspacing="1" cellpadding="0" class="section">
<tr>
<th width="14%">type</th>
<th width="34%">effect</th>
<th width="4%"> </th>
<th width="14%">type</th>
<th width="34%">effect</th>
</tr>
<tr>
<td colspan="5" style="font-weight:bold;">表单效果</td>
</tr>
<tr>
<td>button</td>
<td><input form="html5form" type="button" /></td>
<td> </td>
<td>checkbox</td>
<td><input form="html5form" type="checkbox" /></td>
</tr>
<tr>
<td>date</td>
<td><input form="html5form" type="date" /></td>
<td> </td>
<td>datetime</td>
<td><input form="html5form" type="datetime" /></td>
</tr>
<tr>
<td>datetime-local</td>
<td><input form="html5form" type="datetime-local" /></td>
<td> </td>
<td>email</td>
<td><input form="html5form" type="email" /></td>
</tr>
<tr>
<td>file</td>
<td><input form="html5form" type="file" /></td>
<td> </td>
<td>hidden</td>
<td><input form="html5form" type="hidden" /> </td>
</tr>
<tr>
<td>image</td>
<td><input form="html5form" type="image" /></td>
<td> </td>
<td>month</td>
<td><input form="html5form" type="month" /></td>
</tr>
<tr>
<td>number</td>
<td><input form="html5form" type="number" /></td>
<td> </td>
<td>password</td>
<td><input form="html5form" type="password" /></td>
</tr>
<tr>
<td>radio</td>
<td><input form="html5form" type="radio" /></td>
<td> </td>
<td>range</td>
<td><input form="html5form" type="range" /></td>
</tr>
<tr>
<td>reset</td>
<td><input form="html5form" type="reset" /></td>
<td> </td>
<td>text</td>
<td><input form="html5form" type="text" /></td>
</tr>
<tr>
<td>time</td>
<td><input form="html5form" type="time" /></td>
<td> </td>
<td>url</td>
<td><input form="html5form" type="url" /></td>
</tr>
<tr>
<td>week</td>
<td><input form="html5form" type="week" /></td>
<td> </td>
<td>color</td>
<td><input form="html5form" type="color" /></td>
</tr>
<tr>
<td>search</td>
<td><input form="html5form" type="search" /></td>
<td> </td>
<td>telephone</td>
<td><input form="html5form" type="telephone" /></td>
</tr>
<tr>
<td>submit</td>
<td><input form="html5form" type="submit" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5" style="font-weight:bold;">视频效果</td>
</tr>
<tr>
<td colspan="5">
<!--
需要IIS配置对mp4/ogg文件类型的访问权限,请按照下面的步骤进行设置：
1.打开iis7管理器
2.找到相应的站点（只对此站点有效）或者站点服务器（对本服务器的所有站点有效）
3.双击mime类型
4.点击【添加】
5.文件扩展名 填写：.mp4
mime类型 填写：video/mp4
确定保存
-->
<video width="320px" height="240px" controls="controls" style="background: #404040;">
<source src="./video/video2.ogg" type="video/ogg">
<source src="./video/video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</td>
</tr>
<tr>
<td colspan="5" style="font-weight:bold;">文字效果</td>
</tr>
<tr>
<td>文字阴影</td>
<td><div style="width:240px; font-size: 16px; border:#FF0000 1px solid; text-shadow: 2px 2px 2px #FF0000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">测试html5的阴影效果,以及溢出效果</div></td>
<td> </td>
<td>悬停渐变</td>
<td><div id="overlay"><div></div></div></td>
</tr>
<tr>
<td>RGBA</td>
<td><div style="height: 100%; background: url(./image/img19.jpg);"><div style="height: 100%; width: 50%; background: rgba(255,0.3);">rgba(255,0.3)</div></div></td>
<td> </td>
<td>图片边框</td>
<td><div style="width: 50%; height: 80%; border-image-source: url(./image/img19.jpg); border-image-slice: 10 20% 20 30%; border-image-width: 4px; border-image-repeat: repeat;">图片边框</div></td>
</tr>
<tr>
<td>圆角边框</td>
<td><div style="width: 50%; height: 80%; text-align:center; border: 1px solid blue; border-radius: 4px 8px 12px 16px / 14px 10px 6px 2px;">圆角边框</div></td>
<td> </td>
<td>圆角边框</td>
<td><div style="width: 0px; border-left: 20px solid red; border-top: 20px solid blue; border-right: 20px solid transparent; border-top-left-radius: 20px; border-top-right-radius: 20px;"></div></td>
</tr>
<tr>
<td>盒子阴影</td>
<td><div style="width: 50%; height: 50%; text-align: center; border: 1px solid red; box-shadow: 8px 4px 2px 2px blue;">盒子阴影</div></td>
<td> </td>
<td>图片旋转</td>
<td><div id="rotate"><img src="./image/img28.jpg" height="100%" alt=""/></div></td>
</tr>
<tr>
<td>动画效果</td>
<td><div style="background: red; cursor:pointer; width:60%;" onclick="if(this.className=='myanimation') this.className=''; else this.className='myanimation';">点我开始动画,再点停止动画</div></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5" style="font-weight:bold;">Web API</td>
</tr>
<tr>
<td>window.postMessage</td>
<td colspan="4">
<script type="text/javascript">
if (!window.postMessage)
document.write('不支持');
else
document.write('支持 ' + window.postMessage);
</script>
</td>
</tr>
<tr>
<td>base64加密</td>
<td>
<script type="text/javascript">
var src = 'hello,world';
document.write(src + ' ==> ' + window.btoa(src));
</script>
</td>
<td> </td>
<td>base64解密</td>
<td>
<script type="text/javascript">
var src = 'aGVsbG8sIHdvcmxk';
document.write(src + ' ==> ' + window.atob(src));
</script>
</td>
</tr>
<tr>
<td>canvas</td>
<td colspan="4">
<canvas id="mycanvas" style="background: #808080;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;
// 绘制直线
ctx.save();
ctx.strokeStyle = '#FF0000'; // 线的颜色为红色
ctx.lineWidth = 2; // 线的宽度为2像素
ctx.beginPath(); // 开始路径
for(var i = 1; i < 8; i++)
{
ctx.moveTo(i*100,0);
ctx.lineTo(i*100,400);
}
for(var i = 1; i < 4; i++)
{
ctx.moveTo(0,i*100);
ctx.lineTo(800,i*100);
}
ctx.stroke();
ctx.closePath(); // 关闭路径
ctx.restore();
// 绘制文字
ctx.save();
ctx.fillStyle = '#00FF00';
ctx.font = 'italic 30px sans-serif';
ctx.textAlign = 'left';
ctx.textBaseLine = 'top';
ctx.fillText('hello,world',20);
ctx.font = 'bold 30px sans-serif';
ctx.strokeText('hello,56);
ctx.restore();
// 绘制图片
var img1 = new Image();
img1.src = './image/img28.jpg';
img1.onload = function () {
ctx.drawImage(img1,200,100,100);
}
// 渐变色
ctx.save();
var gradient = ctx.createLinearGradient(0,400);
gradient.addColorStop('0.00','black');
gradient.addColorStop('0.50','red');
gradient.addColorStop('1.00','white');
ctx.fillStyle = gradient;
ctx.fillRect(1,98,198);
gradient = ctx.createRadialGradient(200,200);
gradient.addColorStop('0.00','black');
gradient.addColorStop('0.33','blue');
gradient.addColorStop('0.66','green');
gradient.addColorStop('1.00','white');
ctx.fillStyle = gradient;
ctx.fillRect(100,200);
gradient = ctx.createRadialGradient(250,250,10,300,100);
gradient.addColorStop('0.00','blue');
gradient.addColorStop('1.00','white');
ctx.fillStyle = gradient;
ctx.fillRect(200,200);
ctx.restore();
// 阴影效果
ctx.save();
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0,0.9)';
ctx.font = '20px Times New Roman';
ctx.fillStyle = '#FF0000';
ctx.fillText('阴影效果',80);
ctx.fillStyle = 'rgba(0,0.9)';
ctx.fillRect(0,50,50);
ctx.restore();
// 旋转图片
var img2 = new Image();
img2.src = './image/img19.jpg';
img2.onload = function () {
ctx.save();
ctx.translate(200,100);
ctx.scale(0.8,0.8);
ctx.rotate(15*Math.PI/180);
ctx.drawImage(img2,100);
ctx.restore();
}
// 像素操作
var img3 = new Image();
img3.src = './image/img18.jpg';
img3.onload = function () {
ctx.save();
ctx.drawImage(img3,400,100);
// 反色处理
var imgd = ctx.getImageData(400,100);
var pix = imgd.data;
for (var i = 0,n = pix.length; i < n; i+=4)
{
pix[i] = 255 - pix[i]; // 红
pix[i+1] = 255 - pix[i+1]; // 绿
pix[i+2] = 255 - pix[i+2]; // 蓝
pix[i+3] = pix[i+3]; // alpha
}
ctx.putImageData(imgd,500,0);
ctx.restore();
}
</script>
</td>
</tr>
</table>
</body>
</html>
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5移动端获奖无缝滚动动画实现