CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Bree+Serif");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300");

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline;

}

html {

line-height: 1;

}

ol,

ul {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption,

th,

td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

q,

blockquote {

quotes: none;

}

q:before,

q:after,

blockquote:before,

blockquote:after {

content: "";

content: none;

}

a img {

border: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

html,

body,

main {

height: 100%;

width: 100%;

box-sizing: border-box;

-webkit-overflow-scrolling: touch;

}

body {

font-size: 1em;

line-height: 1.4rem;

color: #ecf0f1;

background-color: #2c3e50;

font-family: 'Open Sans', sans-serif;

}

.accessible-hide {

position: absolute;

height: 0;

width: 0;

overflow: hidden;

}

.flexy-center {

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.svg-icon {

width: 1em;

height: 1em;

fill: #ecf0f1;

}

.svg-icon:nth-of-type(1) {

-webkit-transform: translate(-0.55em);

transform: translate(-0.55em);

}

.svg-icon:nth-of-type(2) {

-webkit-transform: translate(0.55em);

transform: translate(0.55em);

}

.button {

padding: 0.7rem 1.4rem;

border-radius: .2em;

background-color: #27ae60;

margin: 0 1.4rem;

-webkit-transition: all 0.225s ease-in-out;

transition: all 0.225s ease-in-out;

cursor: pointer;

}

.button__container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

.button--disabled {

pointer-events: none;

opacity: .2;

}

.container {

font-size: 3em;

height: .45em;

width: 5em;

margin-top: 7rem;

-webkit-perspective: 1200px;

perspective: 1200px;

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

background-image: -webkit-radial-gradient(#ecf0f1 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-image: radial-gradient(#ecf0f1 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-size: .25em .25em;

background-repeat: repeat-x;

background-position: 0 bottom;

-webkit-transition: all 2.7s ease-in-out;

transition: all 2.7s ease-in-out;

}

.container__title {

margin-top: 1em;

font-size: 2em;

opacity: 0;

-webkit-transition: opacity 0.225s ease-in-out;

transition: opacity 0.225s ease-in-out;

}

.container__title--anim {

opacity: 1;

}

.container__anim {

background-position: 200% bottom;

}

.container:before {

content: '';

height: 1em;

width: calc(100% + .15em);

position: absolute;

left: -.075em;

bottom: -.48em;

box-sizing: border-box;

padding-bottom: .25em;

border-radius: 0 0 .25em .25em;

border: .05em solid white;

border-bottom-color: transparent;

border-top-color: transparent;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-transform: rotateX(63deg);

transform: rotateX(63deg);

}

.container__jump {

background-image: -webkit-radial-gradient(#e74c3c 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-image: radial-gradient(#e74c3c 0.015em, rgba(0, 0, 0, 0) 0.02em);

}

.container__jump .response {

-webkit-animation: responseMove 1.125s ease-out forwards;

animation: responseMove 1.125s ease-out forwards;

}

.container__jump .response .item {

opacity: 1;

-webkit-animation: 0.9s linear forwards;

animation: 0.9s linear forwards;

-webkit-animation-delay: 0.1125s;

animation-delay: 0.1125s;

}

.container__jump .response .item:nth-child(1) {

-webkit-animation-name: jump4;

animation-name: jump4;

}

.container__jump .response .item:nth-child(2) {

-webkit-animation-name: jump0;

animation-name: jump0;

}

.container__jump .response .item:nth-child(3) {

-webkit-animation-name: jump3;

animation-name: jump3;

}

.container__jump .response .sparks {

-webkit-transform: scale(2);

transform: scale(2);

opacity: 0;

background-color: #e74c3c;

}

.container__jump .server {

fill: #e74c3c;

}

.container__jump:before {

border-right-color: #e74c3c;

}

.container .svg-icon {

position: absolute;

bottom: 100%;

}

.container .svg-icon:nth-of-type(1) {

left: 0;

}

.container .svg-icon:nth-of-type(2) {

right: 0;

}

.response {

position: absolute;

right: -.5em;

top: -1em;

}

.response .item {

opacity: 0;

line-height: 1em;

font-family: 'Bree Serif', serif;

}

.sparks {

width: 1em;

height: 1em;

border-radius: 1em;

background-color: white;

-webkit-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.225s ease-out;

transition: all 0.225s ease-out;

}

.item {

top: 0;

right: 0;

position: absolute;

width: 0.7em;

z-index: 2;

text-align: center;

-webkit-transition: all 0.45s ease-out;

transition: all 0.45s ease-out;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

line-height: .87em;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

@-webkit-keyframes responseMove {

100% {

-webkit-transform: translate(-2.5em, 0.7em) scale(1.5);

transform: translate(-2.5em, 0.7em) scale(1.5);

}

}

@keyframes responseMove {

100% {

-webkit-transform: translate(-2.5em, 0.7em) scale(1.5);

transform: translate(-2.5em, 0.7em) scale(1.5);

}

}

@-webkit-keyframes jump4 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.45em) rotate(-360deg);

transform: translateY(0) translateX(-0.45em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.65em) rotate(-360deg);

transform: translateY(0) translateX(-0.65em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump4 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.45em) rotate(-360deg);

transform: translateY(0) translateX(-0.45em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.65em) rotate(-360deg);

transform: translateY(0) translateX(-0.65em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@-webkit-keyframes jump0 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump0 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@-webkit-keyframes jump3 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(0.2em) rotate(-360deg);

transform: translateY(0) translateX(0.2em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(0.4em) rotate(-360deg);

transform: translateY(0) translateX(0.4em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump3 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(0.2em) rotate(-360deg);

transform: translateY(0) translateX(0.2em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(0.4em) rotate(-360deg);

transform: translateY(0) translateX(0.4em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

403保护网站服务器,HTML5服务器禁止访问403错误动画相关推荐

  1. python_django(禁止访问 (403) CSRF验证失败. 请求被中断)

    禁止访问 403 错误 原因 解决方法: 错误 Forbidden (403) CSRF verification failed. Request aborted.禁止访问 (403) CSRF验证失 ...

  2. html403禁止访问怎么解决,http出现“禁止访问 403”错误的起因和解决方法

    如果某个网页出现问题,访问这个网页的用户就会被返回 403错误,这类问题大多数出现在http脚本发生错误的故障上,不过 403 错误也有很多细节分类,比如 403.1 就是禁止执行访问错误.阅读下文了 ...

  3. 华为服务器显示403,禁止访问403是什么意思 网页提示403怎么解决

    在浏览网页的时候有时网页会提示403错误,其实该问题的主要原因是http脚本发生错误,不过403错误也有很多细节分类,比如403.1.403.2等等.下面来看看具体的错误情况以及解决方法. 403.1 ...

  4. 解决：禁止访问 (403) CSRF验证失败

    在测试Django框架POST请求方式时,程序报错如下 在确保访问安全的情况下有一下两种方式: 1.在相应html文件form代码块中添加如下代码: <form method="pos ...

  5. 禁止访问 (403)CSRF验证失败. 请求被中断.

    出现这个问题是因为django在收到表单提交过来的信息时,会检查提交过来的信息中是否有token,并会对token进行校验,如果校验通过,那就继续执行,反之就会认定这次的数据有伪造的风险. 解决方案: ...

  6. 禁止访问 (403) CSRF验证失败. 请求被中断.————错误处理（测试接口时遇到的问题）

    问题描述 解决措施 在Header参数中添加Content-Type和X-CSRFToken信息,这样就不会报错了. 运行结果

  7. IDM无法找到服务器magnet IDM服务器禁止访问此文件

    品牌型号:联想 拯救者Y7000P 系统:win10 64位专业版 软件版本:Internet Download Manager Ver6.39 windows64位版 在平常使用IDM的过程中,我们 ...

  8. 限制访问网站、过滤特定网址、禁止访问指定网站的方法

    限制访问网站.过滤特定网址.禁止访问指定网站的方法 此博文包含图片 (2017-12-19 16:36:25)转载▼ 许多公司出于管理员工上网行为的需要,经常限制电脑访问一些网站例如游戏网站.购物网站 ...

  9. 解决 .htaccess 导致的403禁止访问

    如果启用了mod_rewrite, 那么Options就一定要启用FollowSymLinks或者SymLinksifOwnerMatch, 否则会出现Fobidden页面禁止访问的错误. 于是把 O ...

  10. HTTP 错误 403.9 - 禁止访问：连接的用户过多 XP IIS服务器连接数的修改

    计算机教室的机子是XP的,用IIS很不爽,学生机连接到教师机下载资料或上交作业时常常遇到连接的用户过多的错误提示(HTTP 错误 403.9 - 禁止访问:连接的用户过多),这是因为Windows X ...

最新文章

  1. 没有一种成功是不经历磨砺的
  2. (转载)Nutch 2.0 之 抓取流程简单分析
  3. 轮播图js怎么设置图片自适应大小
  4. Golang的for range遍历
  5. MatConvnet工具箱文档翻译理解（1）
  6. 关于前端设置cookie
  7. 数据库 日期格式操作
  8. 《剑指offer》第五十三题（数组中数值和下标相等的元素）
  9. Python——PyCharm常用快捷键
  10. Mysql 查询本周的数据
  11. Sencha Touch Hello World(转）
  12. 用上了Godaddy的美国主机
  13. PostgreSQL on Docker部署是的shm配置注意
  14. yum [Errno -1] Metadata file does not match checksum
  15. 锐起无盘服务器蓝屏死机,锐起无盘蓝屏怎么办？各类无盘蓝屏怎么办？
  16. mklink命令建立链接实现软件搬家
  17. php接入北斗定位,手机如何连接北斗卫星？
  18. 如何在linux系统之间共享文件
  19. 《正在爆发的互联网革命》北京西单图书大厦签售活动圆满结束
  20. office2013安装后ppt无法打开演示文稿

热门文章

  1. 5. wordpress 简单加速 ---gzip
  2. 10. Browser 对象 - Location 对象（2）
  3. RabbitMQ实战：理解消息通信
  4. java 基础 1 final关键字
  5. 【安卓9】数据库升级
  6. 结对编程--基于android平台的黄金点游戏（2.0版本）
  7. 转载:iOS 8 自适应 Cell
  8. C++ 关于“堆对象和栈对象”
  9. Java 常用的 4 种加密方式（MD5+Base64+SHA+BCrypt）
  10. TortoiseSVN的安装与使用