大会html模板,HTML5 展览会/大会注册/申请页面模板

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

@font-face {

font-family: "Korolev";

src: url(/uploads/150201/2D2B3C_0_0.eot);

src: url(/uploads/150201/2D2B3C_0_0.eot?#iefix) format("embedded-opentype"), url(/uploads/150201/2D2B3C_0_0.woff2) format("woff2"), url(/uploads/150201/2D2B3C_0_0.woff) format("woff"), url(/uploads/150201/2D2B3C_0_0.ttf) format("truetype");

}

html,

body {

overflow-x: hidden;

width: 100%;

}

body {

background: #b4d3f8 url(/uploads/150201/bg-tile.png);

color: #462f74;

font-family: sans-serif;

font-size: 16px;

line-height: 20px;

text-align: center;

padding-bottom: 40px;

}

.ir {

text-indent: 100%;

overflow: hidden;

white-space: nowrap;

}

.logo {

height: 86px;

width: 250px;

margin: 0 auto;

}

.logo path {

-webkit-transition: fill 0.25s;

transition: fill 0.25s;

fill: #f4f2f7;

}

.logo a {

display: block;

}

.logo a:hover path {

fill: #af8bf9;

}

@media (max-width: 480px) {

.logo {

height: 62px;

width: 180px;

}

}

h1,

h2,

h3,

h4 {

color: #462f74;

font-weight: normal;

font-family: "Korolev", sans-serif;

margin: 0 auto 20px;

max-width: 400px;

white-space: nowrap;

}

h1 {

color: #f4f2f7;

font-size: 56px;

line-height: 90px;

margin: 0 auto;

text-shadow: rgba(30, 20, 52, 0.5) 0 1px 1px;

}

h2 {

font-size: 36px;

line-height: 32px;

}

h3 {

font-size: 30px;

line-height: 32px;

}

p {

padding: 0 20px;

margin: 20px auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

a {

color: #36225e;

white-space: nowrap;

}

a:hover {

color: #6345a1;

}

@media (max-width: 480px) {

h2 {

font-size: 28px;

line-height: 22px;

}

h3 {

font-size: 22px;

line-height: 22px;

}

p {

font-size: 14px;

}

}

footer {

font-size: 14px;

font-family: Helvetica, sans-serif;

color: #36225e;

opacity: 1;

padding: 0 20px;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.logo-glitch {

position: relative;

top: 6px;

margin-right: 5px;

height: 24px;

width: 24px;

}

.logo-glitch path {

fill: #36225e;

}

form {

display: block;

margin: 0 auto 30px;

max-width: 400px;

position: relative;

}

form:after {

content: "";

display: table;

clear: both;

}

input,

.button {

border-radius: 0;

font-size: 14px;

height: 41px;

border: 0;

padding: 0 15px;

margin: 0;

float: left;

}

input {

padding-left: 40px;

display: block;

background: #f4f2f7;

width: calc(100% - 150px);

box-shadow: rgba(99, 69, 161, 0) 0 0 0 1px inset;

-webkit-transition: box-shadow 0.5s;

transition: box-shadow 0.5s;

}

input:focus {

outline: none;

box-shadow: #6345a1 0 0 0 1px inset;

}

.button {

color: #f4f2f7;

background: #6345a1;

width: 150px;

white-space: nowrap;

-webkit-transition: background 0.25s;

transition: background 0.25s;

}

.button:hover {

background: #7d5eba;

}

@media (max-width: 480px) {

input,

button,

.button {

display: block;

margin: 0 auto;

width: 100%;

}

}

.icon-envelope {

position: absolute;

left: 12px;

top: 12px;

height: 16px;

width: 21px;

}

.icon-envelope path {

fill: #7d5eba;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

input:focus + .icon-envelope path {

fill: #6345a1;

}

.eternia {

background: #a9d8fe;

margin: 0 auto;

padding: 40px 0 0;

position: relative;

text-align: center;

background: -webkit-linear-gradient(#4b36a1, #a9d8fe 60%);

background: linear-gradient(#4b36a1, #a9d8fe 60%);

}

.eternia:after {

content: "";

display: table;

clear: both;

}

.webstor {

position: relative;

padding: 0 20px;

z-index: 2;

}

.pblock {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

}

.pblock div {

background-repeat: no-repeat;

background-size: contain;

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

-webkit-backface-visibility: hidden;

}

.grayskull-hold {

position: relative;

}

.grayskull-hold:after {

content: "";

display: table;

clear: both;

}

@media (min-width: 1280px) {

.grayskull-hold {

background: url(/uploads/150201/sun-tile.png) repeat-x left bottom;

}

}

.grayskull {

height: 0;

padding-bottom: 43.05556%;

position: relative;

margin: 0 auto;

}

@media (min-width: 1440px) and (min-height: 901px) {

.grayskull {

float: right;

width: 1440px;

height: 620px;

padding-bottom: 0;

}

}

@media (min-width: 1024px) and (max-height: 900px) {

.grayskull {

float: right;

width: 1200px;

height: 517px;

padding-bottom: 0;

}

}

@-webkit-keyframes tilt {

0% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

50% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

100% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

}

@keyframes tilt {

0% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

50% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

100% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

}

.buoy {

width: calc(100vw - 1440px);

}

.buoy:after {

content: " ";

position: absolute;

left: 0;

top: 72%;

right: 0;

bottom: 0;

background: url(/uploads/150201/bg-tile.png);

opacity: 0.75;

}

.buoy div {

background: url(/uploads/150201/buoy.png) right 70% no-repeat;

-webkit-transform-origin: center bottom;

-ms-transform-origin: center bottom;

transform-origin: center bottom;

width: 37px;

left: auto;

right: 50%;

}

@media (min-width: 1440px) {

.buoy div {

-webkit-animation: tilt 10s linear 0s infinite;

animation: tilt 10s linear 0s infinite;

}

}

.sun {

opacity: 0;

-webkit-transition: opacity 0.2s;

transition: opacity 0.2s;

}

.sun.active {

opacity: 1;

}

.cloud {

opacity: 0.95;

z-index: -1;

}

.touch .cloud div,

.touch .cloud-tile div,

.touch .buoy div {

-webkit-animation: none;

animation: none;

}

@-webkit-keyframes loop {

0% {

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

49.9% {

opacity: 1;

-webkit-transform: translateX(150vw);

transform: translateX(150vw);

}

50% {

opacity: 0;

-webkit-transform: translateX(150vw);

transform: translateX(150vw);

}

50.1% {

opacity: 0;

-webkit-transform: translateX(-150vw);

transform: translateX(-150vw);

}

50.2% {

opacity: 1;

-webkit-transform: translateX(-150vw);

transform: translateX(-150vw);

}

100% {

opacity: 1;

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

}

@keyframes loop {

0% {

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

49.9% {

opacity: 1;

-webkit-transform: translateX(150vw);

transform: translateX(150vw);

}

50% {

opacity: 0;

-webkit-transform: translateX(150vw);

transform: translateX(150vw);

}

50.1% {

opacity: 0;

-webkit-transform: translateX(-150vw);

transform: translateX(-150vw);

}

50.2% {

opacity: 1;

-webkit-transform: translateX(-150vw);

transform: translateX(-150vw);

}

100% {

opacity: 1;

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

}

@-webkit-keyframes tile {

0% {

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

100% {

-webkit-transform: translateX(100vw);

transform: translateX(100vw);

}

}

@keyframes tile {

0% {

-webkit-transform: translateX(0vw);

transform: translateX(0vw);

}

100% {

-webkit-transform: translateX(100vw);

transform: translateX(100vw);

}

}

.cloud-tile {

-webkit-mask-image: url(/uploads/150201/mask-1.png);

mask-image: url(/uploads/150201/mask-1.png);

-webkit-mask-size: auto 100%;

mask-size: auto 100%;

-webkit-mask-position: right top;

mask-position: right top;

}

.cloud-tile div {

background-repeat: repeat-x;

left: -100vw;

}

.cloud-tile-1 {

-webkit-mask-image: none;

mask-image: none;

}

.cloud-tile-1 div {

background-image: url(/uploads/150201/cloud-tile-1.png);

-webkit-animation: tile 100s linear 0s infinite;

animation: tile 100s linear 0s infinite;

}

.cloud-tile-2 div {

background-image: url(/uploads/150201/cloud-tile-2.png);

-webkit-animation: tile 300s linear 0s infinite;

animation: tile 300s linear 0s infinite;

}

.cloud-tile-3 div {

background-image: url(/uploads/150201/cloud-tile-3.png);

-webkit-animation: tile 200s linear 0s infinite;

animation: tile 200s linear 0s infinite;

}

.cloud-1 div {

background-image: url(/uploads/150201/cloud-1.png);

top: -25%;

left: -10vw;

width: 40vw;

max-width: 576px;

-webkit-animation: loop 2200s linear 0s infinite;

animation: loop 2200s linear 0s infinite;

}

.cloud-2 div {

background-image: url(/uploads/150201/cloud-2.png);

top: -40%;

left: 65vw;

width: 30vw;

max-width: 432px;

-webkit-animation: loop 2800s linear 0s infinite;

animation: loop 2800s linear 0s infinite;

}

.cloud-3 div {

background-image: url(/uploads/150201/cloud-3.png);

top: 20%;

left: 85vw;

width: 12vw;

max-width: 216px;

-webkit-animation: loop 3600s linear 0s infinite;

animation: loop 3600s linear 0s infinite;

}

.cloud-4 div {

background-image: url(/uploads/150201/cloud-4.png);

top: 50%;

left: 10vw;

width: 9vw;

max-width: 130px;

-webkit-animation: loop 3400s linear 0s infinite;

animation: loop 3400s linear 0s infinite;

}