实例教程 利用html5和css3打造一款创意404页面_html5教程技巧

　　今天要脚本之家的小编要再给大家带来一款html5和css3打造的创意404页面。一起看下效果图吧：

　　实现的代码

　　html代码：

　　

复制代码

代码如下:

<路径 id="zelda_中风" class="st1" d="M138.4,59.5h36.9l-18.5,32L138.4,59.5z M193.8,91.5l18.5-32h -36.9L193.8 ,91.5z M175.4,123.5
l18.5-32h-36.9L175.4,123.5z" />
<路径 id="zelda_dark_shadow" class="st0" d="M156. 9,91.5l- 18.5-32l18.5,10.7L156.9,91.5z M193.8,70.2l-18.5-10.7l18.5,32
L193.8,70.2z M175.4,102.2l-18.5-10.7 l18.5,32L175 .4,102.2z" />
M156.9,91.5l18.5,10.7l18.5-10.7H156.9z" />
M175.4,109.4l6 .3-10.8h-12.5L175.4,109.4z" />




<路径 id="tail" class="st7" d="M89,315c2.2-15.2-23-13.2-21.6,4.8c1.7,22.3,24.4,22.1,42.5,9.1c10.8- 7.8,15.3-1.8 ,19.1,1.1 c2.3,1.7,6.7,3.3,11-3" />


<路径 id="nose_hole" class="st10" d="M213.2,266.3c0.6,0,1,0.5,0.9,1.1c0,0.6-0.5,1-1.1,0.9c-0.6,0-1 -0.5-0.9-1.1
C212.1,266.6,212.6,266.2,213.2,266.3z" />
<路径 id="nose_hole_1_" class="st10" d="M208.1,266.9c0.6 ,0,1,0.5,0.9,1.1c0,0.6-0.5,1-1.1,0.9c-0.6,0-1-0.5-0.9-1.1
C207.1,267.3,207.6,266.9,208.1,266.9z" />
<路径 id="monkey-eye-r" class="st10" d="M205,253.5c1.1,0.1,1.9,1,1.9,2.1c-0.1,1.1-1, 1.9-2.1,1.9c-1.1-0.1-1.9-1-1.9-2.1 C203,254.3,203.9,253.4,205,253.5z" />

c-27.4,14.7-44.4,3.1-50.1-9.8c0.3,5.9,1.6,12.6,5.9,17.3C184 .4,296.7,19​​1.8,298.7,201.7,297.5z M208.6,261.2
c-5.7,0.8-8.6-1.1-11.6,1.8c-2.8,2.7-7.7,4.6-3.8,4.1c3.9-0.6,10.1 -3.4,16.8-4.1c0,0,0,0,0,0l-0.5,0c-0.2,0-0.3,0-0.4,0
c-0.5,0-1-0.4-1-0.9C208 .2,261.9,208.2,261.5,208.6,261.2z M198.4,300c0-0.1,0-0.1-0.1-0.2c-0.7,0-1.4,0.1-2,0.1
c-7.8,0-13.9-2.3 -18-6.8c-7.7-8.4-6.6-22.5-6.1-28.4c-5.6-6.2-5.6-11.5-4.6-15c-2,2.3-4.8,8.5,2.1,16.1c-3.9,6.4-5.4, 26.5,9.2,36.2
c7.2,4.8,16.6,5.3,20.8,2.8C199.5,302.9,199,301.2,198.4,300z" />
S182.9,301.1, 189.1,304z" />
c-0.1-0.2-0.4-0.4-0.7-0.3c-0.2,0-0.4,0.2-0.5,0.3l-0.9,1.7l-1.6-1.2 c-0.2-0.1-0.3-0.1-0.5-0.1c-0.4,0.1-0.5,0.4-0.5,0.6
c0,0.1,0.1,0.2,0.2,0.2l1.8,1.3l-1.1,2.1 c-0.1,0.1-0.1,0.2,0,0.3c0.1,0.3,0.4,0.4,0.7,0.4c0.2,0,0.3-0.1,0.4-0.3l1-1.9l1.7,1.3
c0.1,0.1,0.3,0.1,0.5,0.1C191.1,322.8,191.3,322.5,191.2,322.3z" />

c-0.1,0-0.2-0.1-0.3-0.3c-2.4-11.4-1.1-27.6,0.3-43.8c0-0.1,1.2-5.7-2.6-7.2c-5.2-2.1 -5.5,2.5-5.5,2.7c-0.5,4.8-3.6,39,1.1,51.4
c0,0.1,0,0.2,0,0.3c-0.4,0.5-0.7,1-0.9,1.7c- 1.5,3.9,0.7,8.3,4.8,9.9c4.1,1.6,8.7-0.3,10.1-4.2c0.5-1.3,0.6-2.7,0.3-4
c0-0.1,0-0.2,0.1- 0.2c0.5-0.7,0.9-1.6,0.5-2.9C166.2,345.5,165.4,344.4,164.3,344.1z" />

C163.3,304.6,165,300.3, 165,296z" />









<路径 id="star1" class="st5" d="M652.6,332.5c-5.3,3.1-12.1,1.2- 15.1-4.1l-1.4-2.4l1.4,2.4c3.1,5.3,1.2,12.1-4.1,15.1l-2.4,1.4l2.4-1.4c5.3-3.1,12.1-1.2,15.1,4.1l1 .4,2.4l-1.4-2.4C645.5,342.3,647.3,335.5,652.6,332.5l2.4-1.4L652.6,332.5z"/>
<路径 id="star2" class="st5" d="M503.4,73.7c-8,4.6-18.1,1.9-22.7-6.1l-2.1-3.6l2.1,3.6c4.6,8, 1.9,18.1-6.1,22.7l-3.6,2.1l3.6-2.1 c8-4.6,18.1-1.9,22.7,6.1l2.1,3.6l-2.1-3.6C492.7,88.4,495.4,78.3,503.4, 73.7l3.6-2.1L503.4,73.7z" />


g>

C617.6,53.3,621.1,53.6,622.5,55.9 z M628.8,94.1c-4.1-6.1-11.6-9-16.7-6.4c-5.1,2.6-5.9,9.6-1.7,15.7c4.1,6.1,11.6,9,16.7,6.4
C632。 2,107.2,632.9,100.2,628.8,94.1z M644.5,109c-3.6,0-6.5,2.2-6.5,5s2.9,5,6.5,5s6.5-2.2,6.5-5S648.1,109,644.5,109z
M645 .7,95.8c-2.3-1.2-5-0.5-6,1.4c-1,2,0,4.5,2.3,5.7c2.3,1.2,5,0.5,6-1.4C649,99.6,648,97,645.7 ,95.8z M686.5,81
c0-25.1-20.4-45.5-45.5-45.5c-16.1,0-30.2,8.4-38.3,21c7.9-5.9,17.7-9.5,28.3-9.5c26,0 ,47,21,47,47c0,6.3-1.3,12.3-3.5,17.8
C681.9,103.6,686.5,92.8,686.5,81z" />

c-6,0-11.8,3.1-15.1,8l-52.7,79.8c-1.2,2.1-2.1,4.5-2.1,6.6c0,6.6,5,11.1,10.3, 11.1H339v24.3c0,5.6,4.3,10.1,9.9,10.1
c6,0,10.5-4.5,10.5-10.1v-24.3h11.4C375.6,244.3,379.5,240.4,379.5,235.5z M339,226 .4小时- 45.5l45.5-67.8V226.4z" />
c-1.2,1.9-3.3,4.3-3.6,5.8c-0.8,4.6,2.3,5.5,7.3,5.5H340 M359.5,235H379 M342,232l-4,7 M345 ,232l-4,7 M358,232l-4,7 M361,232l-4,7" />
C346.1,267.3,347.4,266,349,266z M349,155.1c1.6, 0,2.9,1.3,2.9,2.9s-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9S347.4,155.1,349,155.1
z M344.4,144.6c1.6,0,2.9 ,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9C341.4,145.9,342.7,144.6,344.4,144.6z" />


c-6,0-11.8,3.1-15.1,8l-52.7,79.8c-1.2,2.1-2.1,4.5-2.1,6.6 c0,6.6,5,11.1,10.3,11.1h56.7v24.3c0,5.6,4.3,10.1,9.9,10.1
c6,0,10.5-4.5,10.5-10.1v-24.3h11.4C623.1,244.3,627,240.4 ,627,235.5z M586.5,226.4H541l45.5-67.8V226.4z" />
c-1.2,1.9-3.3,4.3-3.6,5.8c-0.8,4.6,2.3,5.5,7.3,5.5h51.5 M607,235h19。 5 M589.5,232l-4,7 M592.5,232l-4,7 M605.5,232l-4,7
M608.5,232l-4,7" />
C593.6,267.3,594.9,266,596.5,266z M596.5,155.1c1.6,0,2.9,1.3,2.9,2.9s-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9
S594.9,155.1,596.5,155.1z M591.8,144.6c1.6,0,2.9,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9
C588.9,145.9,590.2,144.6,591.8,144.6z" />


C486。 1,280,502,242.9,502,208.9z M481.1,208.9c0,26.8-8.7,53-3​​3.1,53c-24.6,0-33.1-26.2-33.1-53c0-26.8,8.5-52.8,33.1-52.8
C472 .4,156.1,481.1,182.1 ,481.1,208.9z" />
s13.1,62.6,45.1,62.6c31.8,0,44.1-32.6,44.1-62.6 M487.5,172c3,0,5.5,2.5,5.5,5.5c0,3- 2.5,5.5-5.5,5.5c-3,0-5.5-2.5-5.5-5.5
C482,174.5,484.5,172,487.5,172z M492.5,202c3,0,5.5,2.5,5.5,5.5c0,3- 2.5,5.5-5.5,5.5c-3,0-5.5-2.5-5.5-5.5
C487,204.5,489.5,202,492.5,202z" />
C490,206.1,491.1,205,492.5,205z M487.5,175c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5
C485,176.1,486.1,175,487.5,175z M448.1,143.4c1.6,0,2.9,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9- 2.9
C445.1,144.7,446.4,143.4,448.1,143.4z M448.1,268.3c1.6,0,2.9,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9 -1.3-2.9-2.9
C445.1,269.6,446.4,268.3,448.1,268.3z" />


<路径 id="sword_handle_line" class="st14" d="M453.9,197c2,1.5,2.4,4.3,0.9,6.3l-0.6,0.8c-1.5,2-4.3,2.4 -6.3,0.9" />

css代码：

复制代码

代码如下：

.me404 {
width: 1000px;
高度：480px；
位置：绝对；
顶部：50%；
左侧：50%；
左边缘：-400px；
顶部边缘：-240px；
}
.st0 {
填充规则：evenodd；
剪辑规则：evenodd；
填充：#E8EBED；
}
.st1 {
填充：# FFFFFF;
笔画：#89949B；
笔画宽度：3；
笔画线帽：圆形；
笔画线连接：圆形；
笔画斜接限制：10；
}
.st2 {
填充规则：evenodd;
剪辑规则：evenodd;
填充：#DBDFE1;
}
.st3 {
填充：#FFFFFF;
}
.st4 {
填充规则：evenodd；
剪辑规则：evenodd；
填充：#E8EBED；
描边：#89949B；
描边宽度: 3;
笔画线帽：圆形；
笔划线连接：圆形；
笔画斜接限制：10；
}
.st5 {
填充规则：evenodd;
剪辑规则：evenodd；
填充：#FFFFFF；
描边：#89949B；
描边宽度：3；
描边线帽：圆形；
描边线连接：圆形;
笔划斜接限制：10;
}
.st6 {
填充规则：evenodd；
剪辑规则：evenodd；
填充：无；
笔划： #89949B;
笔画宽度：3；
笔画线帽：圆形；
笔画线连接：圆形；
笔画斜接限制：10；
}

通过以上两种代码就可以实现一款很有创意404页面。大家可以尝试一下哦。