一个XML动画页面效果 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<HTML xmlns:t>
<HEAD>
<TITLE>XML页面效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9><BR><BR>
<CENTER>XML页面效果</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#00FF00 border=5 borderlight="green">
  <TBODY>
  <TR>
    <TD align=middle>效果显示</TD>
  </TR>
  <TR>
    <TD align=middle>
      <STYLE type=text/css>.time {
	BEHAVIOR: url(#DEFAULT#TIME2)
}
t\:* {
	BEHAVIOR: url(#DEFAULT#TIME2)
}
BODY {
	MARGIN: 0px; FONT-FAMILY: verdana
}
.viewbox {
	BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 10px; BACKGROUND: url(../Graphics Files/bgclockgray.gif) #000000; LEFT: 0px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 155px; PADDING-TOP: 10px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 130px; TEXT-ALIGN: center
}
.colorbox {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; Z-INDEX: 1; BACKGROUND: green; FILTER: alpha(opacity=20); LEFT: 0px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 155px; PADDING-TOP: 10px; POSITION: absolute; TOP: 0px; HEIGHT: 130px; TEXT-ALIGN: center
}
.topbox {
	Z-INDEX: 5; LEFT: 0px; OVERFLOW: hidden; WIDTH: 155px; PADDING-TOP: 35px; POSITION: absolute; TOP: 0px; HEIGHT: 130px; TEXT-ALIGN: center
}
.letter {
	DISPLAY: none; FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: white
}
.posab {
	POSITION: absolute
}
</STYLE>

<DIV class=viewbox>
      <DIV id=bar1 
      style="Z-INDEX: 1; BACKGROUND: white; FILTER: alpha(opacity=20); LEFT: 160px; WIDTH: 155px; POSITION: absolute; TOP: 10px; HEIGHT: 45px; background-color: #00FFFF;"></DIV>
      <DIV id=bar2 
      style="Z-INDEX: 1; BACKGROUND: white; FILTER: alpha(opacity=30); LEFT: -155px; WIDTH: 155px; POSITION: absolute; TOP: 25px; HEIGHT: 65px"></DIV>
      <DIV id=bar3 
      style="Z-INDEX: 1; BACKGROUND: white; FILTER: alpha(opacity=40); LEFT: 160px; WIDTH: 155px; POSITION: absolute; TOP: 75px; HEIGHT: 35px; background-color: #FFFF00;"></DIV>
      <DIV id=bar4 
      style="Z-INDEX: 1; BACKGROUND: white; FILTER: alpha(opacity=10); LEFT: 30px; WIDTH: 45px; POSITION: absolute; TOP: -130px; HEIGHT: 130px"></DIV>
      <DIV id=bar5 
      style="Z-INDEX: 1; BACKGROUND: white; FILTER: alpha(opacity=10); LEFT: 80px; WIDTH: 65px; POSITION: absolute; TOP: 130px; HEIGHT: 130px; background-color: #FF00FF;"></DIV>
      </DIV>
      <DIV class=colorbox id=colorbox></DIV>
      <DIV class=topbox id=topbox>
	  <IMG 
      src="//ku.shouce.ren/files/images/201601/56a31fec4cafc.gif" width="100" height="100" id=n5 
      style="DISPLAY: none; Z-INDEX: 3; FILTER: alpha(opacity=100)">
	   <IMG 
      src="//ku.shouce.ren/files/images/201601/56a31fec4cafc.gif" name="n4" width="100" height="100" id=n4 
      style="DISPLAY: none; Z-INDEX: 3; FILTER: alpha(opacity=100)">
	   <IMG 
      src="//ku.shouce.ren/files/images/201601/56a31fec4cafc.gif" width="100" height="100" id=n3 
      style="DISPLAY: none; Z-INDEX: 3; FILTER: alpha(opacity=100)"> 
	  <IMG 
      src="//ku.shouce.ren/files/images/201601/56a31fec4cafc.gif" width="100" height="100" id=n2 
      style="DISPLAY: none; Z-INDEX: 3; FILTER: alpha(opacity=100)"> 
	  <IMG 
      src="//ku.shouce.ren/files/images/201601/56a31fec4cafc.gif" width="100" height="100" id=n1 
      style="DISPLAY: none; Z-INDEX: 3; FILTER: alpha(opacity=100)"> 
      <DIV class=letter id=htmltime 
      style="FONT-SIZE: 32pt; Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 14px; POSITION: absolute; TOP: 25px; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000;">新浪</DIV>
      <DIV class=letter id=htmltime4 
      style="FONT-SIZE: 32pt; Z-INDEX: 2; FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=true, ShadowOpacity=.80) z-index:2; LEFT: -1px; WIDTH: 155px; COLOR: black; POSITION: absolute; TOP: 24px; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000;">新浪</DIV>
      <DIV class=letter id=htmltime3 
      style="Z-INDEX: 2; FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=true, ShadowOpacity=.80); LEFT: 0px; WIDTH: 155px; COLOR: black; POSITION: absolute; TOP: 24px; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;">
      <DIV style="FONT-SIZE: 10pt">欢迎访问</DIV>新浪 </DIV>
      <DIV class=letter id=htmltime2 
      style="Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 8px; POSITION: absolute; TOP: 26px">
      <DIV style="FONT-SIZE: 10pt">欢迎访问</DIV>新浪
  </DIV></DIV>
  <t:par begin = ".5" repeatCount = "indefinite">
  <t:set attributeName = "display" targetElement ="n5" to = "block" begin = "0"></t:set>
  <t:animate attributeName = "width" from = "100" targetElement = "n5" to = "50" begin = "0" dur = 
      ".5"></t:animate>
  <t:animate attributeName = "filters.item(0).opacity" from  = "100" targetElement = "n5" to = "00"    begin = ".4" dur = ".1"></t:animate>
  <t:set attributeName = "filters.item(0).opacity" 
      targetElement = "n5" to = "00" begin = ".5"></t:set>
	  <t:set attributeName = 
      "display" targetElement = "n5" to = "none" begin = 
      ".5"></t:set><t:set attributeName = "display" targetElement = 
      "n4" to = "block" begin = ".5"></t:set><t:animate attributeName = "width" 
      from = "100" targetElement = "n4" to = "50" begin = ".5" dur = 
      ".5"></t:animate><t:animate attributeName = "filters.item(0).opacity" from 
      = "100" targetElement = "n4" to = "00" begin = ".9" dur = 
      ".1"></t:animate><t:set attributeName = "filters.item(0).opacity" 
      targetElement = "n4" to = "00" begin = "1"></t:set><t:set attributeName = 
      "display" targetElement = "n4" to = "none" begin = 
      "1"></t:set><t:set attributeName = "display" targetElement = 
      "n3" to = "block" begin = "1"></t:set><t:animate attributeName = "width" 
      from = "100" targetElement = "n3" to = "50" begin = "1" dur = 
      ".5"></t:animate><t:animate attributeName = "filters.item(0).opacity" from 
      = "100" targetElement = "n3" to = "00" begin = "1.4" dur = 
      ".1"></t:animate><t:set attributeName = "filters.item(0).opacity" 
      targetElement = "n3" to = "00" begin = "1.5"></t:set><t:set attributeName 
      = "display" targetElement = "n3" to = "none" begin = "1.5"></t:set><t:set attributeName = "display" targetElement = 
      "n2" to = "block" begin = "1.5"></t:set><t:animate attributeName = "width" 
      from = "100" targetElement = "n2" to = "50" begin = "1.5" dur = 
      ".5"></t:animate><t:animate attributeName = "filters.item(0).opacity" from 
      = "100" targetElement = "n2" to = "00" begin = "1.9" dur = 
      ".1"></t:animate><t:set attributeName = "filters.item(0).opacity" 
      targetElement = "n2" to = "00" begin = "2"></t:set><t:set attributeName = 
      "display" targetElement = "n2" to = "none" begin = 
      "2"></t:set><t:set attributeName = "display" targetElement = 
      "n1" to = "block" begin = "2"></t:set><t:animate attributeName = "width" 
      from = "100" targetElement = "n1" to = "50" begin = "2" dur = 
      "1"></t:animate><t:animate attributeName = "filters.item(0).opacity" from 
      = "100" targetElement = "n1" to = "00" begin = "2.5" dur = 
      ".5"></t:animate><t:set attributeName = "filters.item(0).opacity" 
      targetElement = "n1" to = "00" begin = "3"></t:set><t:set attributeName = 
      "display" targetElement = "n1" to = "none" begin = "3"></t:set><t:set attributeName = "display" targetElement = 
      "htmltime" to = "block" begin = "3"></t:set><t:animate attributeName = 
      "filters.item(0).opacity" from = "00" targetElement = "htmltime" to = 
      "100" begin = "3" dur = "1"></t:animate><t:set attributeName = 
      "filters.item(0).opacity" targetElement = "htmltime" to = "100" begin = 
      "4"></t:set><t:set attributeName = "display" targetElement = "htmltime" to 
      = "none" begin = "4.75"></t:set><t:set attributeName = "display" 
      targetElement = "htmltime2" to = "block" begin = "5"></t:set><t:animate 
      attributeName = "filters.item(0).opacity" from = "00" targetElement = 
      "htmltime2" to = "100" begin = "5" dur = "1"></t:animate><t:set 
      attributeName = "filters.item(0).opacity" targetElement = "htmltime2" to = 
      "100" begin = "5"></t:set><t:set attributeName = "display" targetElement = 
      "htmltime3" to = "block" begin = "5"></t:set><t:animate attributeName = 
      "filters.item(0).ShadowOpacity" from = "00" targetElement = "htmltime3" to 
      = "100" begin = "5" dur = "1"></t:animate><t:set attributeName = 
      "filters.item(0).shadowOpacity" targetElement = "htmltime3" to = "100" 
      begin = "5"></t:set></t:par><t:par begin = "0" repeatCount = 
      "indefinite"><t:animate attributeName = "left" from = "160" targetElement 
      = "bar1" to = "-200" begin = "2" dur = "8"></t:animate><t:animate 
      attributeName = "left" from = "-200" targetElement = "bar2" to = "160" 
      begin = "4" dur = "8"></t:animate><t:animate attributeName = "left" from = 
      "160" targetElement = "bar3" to = "-200" begin = "6" dur = 
      "8"></t:animate><t:animate attributeName = "top" from = "-130" 
      targetElement = "bar4" to = "200" begin = "0" dur = 
      "6"></t:animate><t:animate attributeName = "top" from = "130" 
      targetElement = "bar5" to = "-200" begin = "4" dur = 
      "8"></t:animate></t:par><t:par begin = "0" 
      repeatCount = "indefinite"><t:animatecolor attributeName = 
      "backgroundColor" targetElement = "colorbox" values = 
      "blue;green;red;yellow" autoReverse = "true" begin = "0" dur = 
      "10"></t:animatecolor></t:par></TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个XML动画页面效果

分类

网站常用

描述

一个HTML写的XML页面效果，只是一个效果，并不是真正的XML网页，模拟了动画的实现，代码比较多，有些复杂，觉得有用的就拿去研究吧。

收藏