html css制作404页面,CSS3绘制404页面

阳光穿透心脏的1/2处 2022-10-06 04:45 380阅读 0赞

标题有点噱了...

最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.

只用的CSS3中的旋转, 效果如下

![dbdfea3befa35a77c3137366b220f186.png][]

上代码:

Error

.circle \{

width: 200px;

height: 200px;

border-radius: 200px;

border: 15px solid \#B22727;

.circle > div \{

color: \#B22727;

font: bolder 50px arial;

transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

\-ms-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

\-moz-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

\-o-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

position: absolute;

top: 0;

left: 0;

.block \{

width: 60px;

display: inline-block;

height: 15px;

background-color: \#B22727;

margin: 12px 10px;

404

兼容IE9+ 及其他, 主要是 transform 的兼容问题, 以下来自这里:

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 需要前缀 -ms-。

虽然除了 transform, 还有其他可以玩的, 像圆角, 404两边的条, 但是觉得效果这个东西, 还是不要炫技术的好.

本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去

一款纯css3实现的漂亮的404页面

之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

html5和css3打造一款创意404页面

之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览   源码下载 实现的代码. h ...

jQuery&plus;CSS3实现404背景动画特效

效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

CSS3绘制六边形

因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

【项目1-1】使用HTML5&plus;CSS3绘制HTML5的logo

作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

CSS3制作404立体字体

CSS3制作404立体字体页面效果     鼠标移动上去,背景色变白.       动态效果:     .demo p:first-child span:hover \{ text-shadow:0px ...

thinkphp访问不存在的模块或者方法跳转到404页面

使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: 'TMPL\_EXCEPTION\_FILE' => './Application/Home/View/ ...

网站设置404页面 --nginx

有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/  输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...

JavaWeb 自定义404页面

本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml ...

随机推荐

VB将JSON映射到表格实现解析

现在抓取网页数据的时候,经常会遇到JSON的数据,相对于繁杂无标签名的HTML源,用JSON传回的数据比较直观好看点.但是从其中提炼数据也让人觉得很烦躁,基本上就是不断的查找,截取,或者组装成JS代码 ...

为什么静态成员、静态方法中不能用this和super关键字

1.      在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行. 因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载 ...

Space and GridLayout 教程

Ice Cream Sandwich (ICS) sports two new widgets that have been designed to support the richer user i ...

以下是jQuery和JavaScript实现相同操作的等价代码。

选择元素  Javascript代码 1.// jQuery   2.var els = $('.el');   3.  4.// 原生方法   5.var els = document.queryS ...

融云(找到&OpenCurlyDoubleQuote;每个App都有沟通的需求”的细分市场)

近日,国内著名App驾考宝典和融云达成合作,为应用增加IM功能,实现亿级用户之间聊天.消息一出,IM(即时通讯)领域的大佬,同时也是个上线不到两岁的新生力量,再次引发了行业的关注. 对业内人士而言,即 ...

安装Postgresql踩过的坑

PG安装相关的 1  系统语言的设置 PG的安装,和系统的locale设置有一定的关系,需要设置,如在.profile或.bashrc中 也可以运行下面的命令: dpkg-reconfigure lo ...

STL—对象的构造与析构

STL内存空间的配置/释放与对象内容的构造/析构,是分开进行的.   对象的构造.析构         对象的构造由construct函数完成,该函数内部调用定位new运算符,在指定的内存位置构造对象 ...

hdu5904 LCIS

这题惩罚我这种经常不管常数的懒人 直接 1e6 TLE 如果1e5对数组枚举过 诶其实很想吐槽些伤心事,但是还是不想在博客上吐口水 不管今年比赛结果如何 请享受比赛 \#include

十个 PHP 开发者最容易犯的错误

PHP 语言让 WEB 端程序设计变得简单,这也是它能流行起来的原因.但也是因为它的简单,PHP 也慢慢发展成一个相对复杂的语言,层出不穷的框架,各种语言特性和版本差异都时常让搞的我们头大,不得不浪费 ...

记一个逻辑bug

1     从数据库中找出一个学生能选的毕业设计(毕设的select or not 字段表示本题目是否已经被选 此时就按照其值为n来查询) 2     用户选择某个毕设后,先更新毕设表(select ...

[dbdfea3befa35a77c3137366b220f186.png]: /images/20221005/18f342a3aa2042fc89616d0a3b3dcf11.png

html css制作404页面,CSS3绘制404页面

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS制作登录页面

相关 HTML+CSS+JavaScript制作简单页面

相关 github页面404

相关 vue 404页面

相关 HTML5+CSS3页面布局

相关 html css制作404页面,CSS3绘制404页面

相关 Yii2 制作一个404页面

相关 404&&403页面

相关 CSS3实现动态404错误页面特效效果

相关 CSS3实现动态404错误页面特效效果