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

html css制作404页面,CSS3绘制404页面标题有点噱了…最近在做一个交通有关的项目,想做一个类似标志牌的404,所以就有了这个.只用的CSS3中的旋转,效果如下上代码:Error.circle{width:200px;height:200px;border-radius:200px;border:15pxsolid#B22727;}.circle>div{color:#B22727;font:bol…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

标题有点噱了…

最近在做一个交通有关的项目, 想做一个类似标志牌的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+CSS3实现404背景动画特效

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

CSS3绘制六边形

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

【项目1-1】使用HTML5+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 …

融云(找到“每个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 …

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164556.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • MySQL获取当前时间与日期间隔[通俗易懂]

    MySQL获取当前时间与日期间隔[通俗易懂]MySQL获取当前时间与日期间隔。MySQL常用的日期和时间函数:函数 说明 CURDATE()、CURRENT_DATE() 返回当前日期,格式:yyyy-MM-dd。 CURTIME()、CURRENT_TIME() 返回当前时间,格式:HH:mm:ss。 NOW()、CURRENT_TIMESTAMP()、LOCALTIME()、SYSDATE()、LO…

  • iOS app测试_测试插件app

    iOS app测试_测试插件app前言1、准备开发者账号自从Xcode7出来之后,一般的真机测试不需要开发者账号,也就不需要看这篇教程,只有app具有“推送”等功能的时候,要真机测试就必须要开发者账号和设置证书。苹果只是让你体验一下它的基本功能,要深入还是要花钱的。待测试的项目2、真机测试步骤1)创建AppID2)创建证书请求文件(CSR文件)3)根据CSR创建开发者证书(C…

  • css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现。试试效果吧。效果图:代码

    2021年12月22日
  • scope=prototype有什么作用_prototype和单例模式

    scope=prototype有什么作用_prototype和单例模式@Scope(“prototype”)//多例模式

  • python字符串转数字

    string模块里有>>>a=”12345″>>>importstring>>>string.atoi(a)12345>>>b=”123.678″>>>string.atof(b)123.678

  • java.lang.abstractMethodError的错误解决「建议收藏」

    java.lang.abstractMethodError的错误解决「建议收藏」日常开发中,如果在打包后遇到过java.lang.abstractMethodError的问题,其中一部分,可能是混淆引起的。解决方法就是把提示报错的地方,通过-keep的方式过滤掉,不让那些代码进行混淆。本人遇到的是一个RecyclerView使用时adapter中的getItemCount方法报错。原因是Adapter是内部类,而getItemCount是公共方法。getItemCo…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号