第一步:把如下代码加入<body>区域中
<style type="text/css">
body
{
background-color:#FFFFFF
font-family: Arial
font-size:10pt
}
</style>
<script>
text=new Array('www','njcatv','net','需要放大的
/\/\
\ /
\/
文字')
var numText=4
color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')
var numColors=5
var endSize=70
var Zspeed=30
var Cspeed=200
var font='Arial Black'
var hide=false
var size=10
var gonum=0
var ie, n
if (document.all) {
n=0
ie=1
zoomText='document.all.zoom.innerText=text[num]'
zoomSize='document.all.zoom.style.fontSize=size'
closeIt=""
fadeColor="document.all.zoom.style.color=color[num]"
}
if (document.layers) {
n=1ie=0
zoomText=""
zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'font-size:'+size+'pxcolor:'+color[0]+'\">'+text[num]+'</p>')"
closeIt="document.zoom.document.close()"
fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'font-size:'+endSize+'pxcolor:'+color[num]+'\">'+text[numText-1]+'</p>')"
}
function zoom(num,fn){
if (size<endSize){
eval(zoomText)
eval(zoomSize)
eval(closeIt)
size+=5
setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
}else{
eval(fn)
}
}
function fadeIt(num){
if (num<numColors){
eval(fadeColor)
eval(closeIt)
num+=1
setTimeout("fadeIt("+num+")",Cspeed)
}else{
hideIt()
}
}
function hideIt(){
if(hide){
if(ie)document.all.zoom.style.visibility="hidden"
if(n)document.layers.zoom.visibility="hidden"
}
}
function init(){
if(ie){
document.all.zoom.style.color=color[0]
document.all.zoom.style.fontFamily=font
}
if(ie || n) go(0)
}
function go(num){
gonum+=1
size=10
if(num<numText){
zoom(num,'go('+gonum+')')
}else{
fadeIt(0)
}
}
</script>
<div id="zoom" align="center" style="position:absolutetop:150">
html5确实很方便
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<p style="text-align:center"><canvas id="canvas1" height="600" width="600"></canvas></p>
<script type="text/javascript">
var canvas = document.getElementById("canvas1")
var ctx = canvas.getContext("2d")
ctx.translate(300,300) //sets center in the middle of the picture
drawHeart()
function drawHeart() {
ctx.beginPath()
ctx.moveTo(0,-100)
ctx.bezierCurveTo(120,-300, 300,-100, 200,50)
ctx.lineTo(0,250)
ctx.lineTo(-200,50)
ctx.bezierCurveTo(-300,-100, -120,-300, 0,-100)
ctx.closePath()
ctx.fillStyle="#ff0000"
ctx.fill()
}
</script>
</body>
</html>
在电脑上用代码弄爱心方法如下:1、打开运行电脑中安装的dreamware软件,打开“文件”菜单中的“新建”功能,创建一个新的HTML文件。
2、在body标签中加入如下的html代码,设置显示爱心的对象。
3、在head标签中添加css样式标签<style>,并写入CSS样式,把爱心的对象变成红色的方块。
4、给这个元素设置伪元素CSS样式。
5、这个爱心的一半就出来了,再给它进行一下角度的45度旋转。
6、接下来只需要再添加另外一边的爱心,再把两个叠加在一起就完成了。