您现在的位置是：网站首页> 编程资料编程资料

一款纯css3实现的漂亮的404页面的实例教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-24 292人已围观

简介之前分享了利用html5和css3打造一款创意404页面，今天和大家分享一款纯css3实现的漂亮的404页面。有详细的代码提供大家学习，感兴趣的朋友可以参考下

　　之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<section class="center">
<article>
<h1 class="header">
404h1>
<p class="error">
ERRORp>
article>
<article>
<img src="vovg1x.png" alt="Funny Face">
article>
<article>
<p>
Lost? Maybe I can help.p>
article>
<article>
<form action="">
<input type="text" name="search" class="srchFld" placeholder="What are you looking for?"
required />
<button type="submit" class="srchBtn">
Searchbutton>
form>
article>
<article>
<h3>
My Suggestions.h3>
<ul>
<li><a href="">Homea>li>
<li><a href="">Portfolioa>li>
ul>
article>
section>

　　css3代码：

CSS Code复制内容到剪贴板