fix：修复重定向页面错误，优化手机端样式
This commit is contained in:
xieyibo
parent
e39187bef2
commit
973a584610
10
MBTI.html
10
MBTI.html
@ -5,7 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A website for MBTI test">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="keywords" content="MBTI, mbti">
|
||||
<title>测试中</title>
|
||||
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
||||
@ -18,8 +18,12 @@
|
||||
<script src="./static/js/MBTI.js"></script>
|
||||
<script src="./static/js/printProjectInfo.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.questionbox {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -28,7 +32,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="navbar navbar-default" style="margin-bottom: 10em;">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="./index.html" class="navbar-brand">MBTI</a>
|
||||
|
||||
154
index.html
154
index.html
@ -5,7 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A website for MBTI test">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="keywords" content="MBTI, mbti">
|
||||
<title>首页</title>
|
||||
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
||||
@ -20,83 +20,87 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="#" class="navbar-brand">MBTI</a>
|
||||
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="./personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="content">
|
||||
<svg viewBox="0 0 1000 300">
|
||||
<symbol id="s-text">
|
||||
<text text-anchor="middle" x="50%" y="50%" dy=".2em">
|
||||
MBTI-TEST
|
||||
</text>
|
||||
</symbol>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<clippath id="cp-text">
|
||||
<text text-anchor="middle" x="50%" y="50%" dy=".2em" class="text--line">
|
||||
MBTI-TEST
|
||||
</text>
|
||||
</clippath>
|
||||
<g clip-path="url(#cp-text)" class="shadow">
|
||||
<rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
|
||||
</g>
|
||||
<g clip-path="url(#cp-text)" class="colortext">
|
||||
<rect width="100%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="80%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="60%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="40%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="20%" height="100%" class="anim-shape"></rect>
|
||||
</g>
|
||||
<use xlink:href="#s-text" class="text--transparent"></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="bs-component">
|
||||
<h2>MBTI测试前须知</h2>
|
||||
<p>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</p>
|
||||
<p>2、性格分析展示的是你的性格倾向，而不是你的知识、技能、经验。</p>
|
||||
<p>
|
||||
3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
|
||||
</p>
|
||||
<p>4、共93题；所有题目没有对错之分，请根据自己的实际情况选择。</p>
|
||||
<p>测试结果仅供参考！</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="#" class="navbar-brand">MBTI</a>
|
||||
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="./personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./MBTI.html" class="a-btn">
|
||||
<span></span>
|
||||
<span>Start</span>
|
||||
<span>Go!</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<div class="content">
|
||||
<svg viewBox="0 0 1000 300" style="width: 100%;">
|
||||
<symbol id="s-text">
|
||||
<text text-anchor="middle" x="50%" y="60%" dy=".2em">
|
||||
MBTI-TEST
|
||||
</text>
|
||||
</symbol>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<use xlink:href="#s-text" class="text"></use>
|
||||
<clippath id="cp-text">
|
||||
<text text-anchor="middle" x="50%" y="60%" dy=".2em" class="text--line">
|
||||
MBTI-TEST
|
||||
</text>
|
||||
</clippath>
|
||||
<g clip-path="url(#cp-text)" class="shadow">
|
||||
<rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
|
||||
</g>
|
||||
<g clip-path="url(#cp-text)" class="colortext">
|
||||
<rect width="100%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="80%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="60%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="40%" height="100%" class="anim-shape"></rect>
|
||||
<rect width="20%" height="100%" class="anim-shape"></rect>
|
||||
</g>
|
||||
<use xlink:href="#s-text" class="text--transparent"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="bs-component">
|
||||
<h2>MBTI测试前须知</h2>
|
||||
<p>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</p>
|
||||
<p>2、性格分析展示的是你的性格倾向，而不是你的知识、技能、经验。</p>
|
||||
<p>
|
||||
3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
|
||||
</p>
|
||||
<p>4、共93题；所有题目没有对错之分，请根据自己的实际情况选择。</p>
|
||||
<p>测试结果仅供参考！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="./MBTI.html" class="a-btn">
|
||||
<span></span>
|
||||
<span>Start</span>
|
||||
<span>Go!</span>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A website for MBTI test">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href=".../personalities.html">十六种人格简介</a>
|
||||
<a href="../personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href=".../personalities.html">十六种人格简介</a>
|
||||
<a href="../personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href=".../personalities.html">十六种人格简介</a>
|
||||
<a href="../personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href=".../personalities.html">十六种人格简介</a>
|
||||
<a href="../personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="navbar-collapse collapse" id="navbar-main">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href=".../personalities.html">十六种人格简介</a>
|
||||
<a href="../personalities.html">十六种人格简介</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,12 @@ body {
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
footer{
|
||||
margin-top: 90px;
|
||||
|
||||
footer {
|
||||
margin-top: 90px;
|
||||
}
|
||||
.flashes{
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
|
||||
.flashes {
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,7 +1,14 @@
|
||||
html, body, .article, .header {
|
||||
html,
|
||||
body,
|
||||
.article,
|
||||
.header {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: relative;
|
||||
@ -134,37 +141,37 @@ button.trigger span::before {
|
||||
transition-property: color, opacity, transform;
|
||||
}
|
||||
|
||||
.intro-effect-jam3:not(.notrans) .content > div {
|
||||
.intro-effect-jam3:not(.notrans) .content>div {
|
||||
-webkit-transition-property: opacity, -webkit-transform;
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
.intro-effect-jam3:not(.notrans) .header h1,
|
||||
.intro-effect-jam3:not(.notrans) .content > div {
|
||||
.intro-effect-jam3:not(.notrans) .content>div {
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.intro-effect-jam3:not(.notrans) .header p,
|
||||
.intro-effect-jam3:not(.notrans) .header p.subline,
|
||||
.intro-effect-jam3:not(.notrans) .content > div {
|
||||
.intro-effect-jam3:not(.notrans) .content>div {
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.intro-effect-jam3.modify:not(.notrans) .header p,
|
||||
.intro-effect-jam3.modify:not(.notrans) .header p.subline,
|
||||
.intro-effect-jam3.modify:not(.notrans) .content > div {
|
||||
.intro-effect-jam3.modify:not(.notrans) .content>div {
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.intro-effect-jam3.article {
|
||||
padding-top: 120px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
@ -190,13 +197,13 @@ button.trigger span::before {
|
||||
}
|
||||
|
||||
|
||||
.intro-effect-jam3 .content > div {
|
||||
.intro-effect-jam3 .content>div {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(150px);
|
||||
transform: translateY(150px);
|
||||
}
|
||||
|
||||
.intro-effect-jam3.modify .content > div {
|
||||
.intro-effect-jam3.modify .content>div {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
@ -214,14 +221,16 @@ button.trigger span::before {
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
.intro-effect-jam3.modify:not(.notrans) .content > div {
|
||||
.intro-effect-jam3.modify:not(.notrans) .content>div {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 47em) {
|
||||
.title, .content {
|
||||
|
||||
.title,
|
||||
.content {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
@ -231,7 +240,8 @@ button.trigger span::before {
|
||||
padding: 0 2em 5em;
|
||||
}
|
||||
|
||||
.title, .content {
|
||||
.title,
|
||||
.content {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
/* test style */
|
||||
@media screen and (max-width: 27em) {
|
||||
p {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
@ -111,13 +122,15 @@
|
||||
|
||||
|
||||
div.content {
|
||||
font: 800 10.5em/1 'Open Sans', Impact;
|
||||
height: 240px;
|
||||
font: 800 14em/1 'Open Sans', Impact;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 5%;
|
||||
margin-bottom: 10%;
|
||||
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
@ -5,126 +5,125 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
a{
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*ub open*/
|
||||
.cs-text {
|
||||
width: 645px;
|
||||
margin: 120px auto 30px;
|
||||
cursor: pointer;
|
||||
width: 645px;
|
||||
margin: 120px auto 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cs-text > span {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
.cs-text>span {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.cs-text-cut {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
-ms-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
-ms-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.cs-text-cut:first-child {
|
||||
border-top: 1px solid rgba(255,255,255,0.5);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.cs-text-cut:last-child {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.cs-text-cut span {
|
||||
display: block;
|
||||
line-height: 180px;
|
||||
color: rgba(255,255,255,1);
|
||||
font-size: 100px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
font-family: 'Sancreek', cursive;
|
||||
text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
|
||||
display: block;
|
||||
line-height: 180px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 100px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
font-family: 'Sancreek', cursive;
|
||||
text-shadow: 7px 2px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.cs-text-cut:last-child span {
|
||||
margin-top: -84px;
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
.cs-text-mid {
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
line-height: 50px;
|
||||
text-indent: 160px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
text-shadow: 0 0 0 rgba(255,255,255,0.9);
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.5);
|
||||
-moz-transform: scale(0.5);
|
||||
-o-transform: scale(0.5);
|
||||
-ms-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
-webkit-transition: all 0.4s ease-in-out 0s;
|
||||
-moz-transition: all 0.4s ease-in-out 0s;
|
||||
-o-transition: all 0.4s ease-in-out 0s;
|
||||
-ms-transition: all 0.4s ease-in-out 0s;
|
||||
transition: all 0.4s ease-in-out 0s;
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
line-height: 50px;
|
||||
text-indent: 160px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
text-shadow: 0 0 0 rgba(255, 255, 255, 0.9);
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.5);
|
||||
-moz-transform: scale(0.5);
|
||||
-o-transform: scale(0.5);
|
||||
-ms-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
-webkit-transition: all 0.4s ease-in-out 0s;
|
||||
-moz-transition: all 0.4s ease-in-out 0s;
|
||||
-o-transition: all 0.4s ease-in-out 0s;
|
||||
-ms-transition: all 0.4s ease-in-out 0s;
|
||||
transition: all 0.4s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.cs-text:hover .cs-text-cut:first-child {
|
||||
-webkit-transform: translateY(-25px);
|
||||
-moz-transform: translateY(-25px);
|
||||
-o-transform: translateY(-25px);
|
||||
-ms-transform: translateY(-25px);
|
||||
transform: translateY(-25px);
|
||||
opacity: 0.5;
|
||||
-webkit-transform: translateY(-25px);
|
||||
-moz-transform: translateY(-25px);
|
||||
-o-transform: translateY(-25px);
|
||||
-ms-transform: translateY(-25px);
|
||||
transform: translateY(-25px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cs-text:hover .cs-text-cut:last-child {
|
||||
-webkit-transform: translateY(25px);
|
||||
-moz-transform: translateY(25px);
|
||||
-o-transform: translateY(25px);
|
||||
-ms-transform: translateY(25px);
|
||||
transform: translateY(25px);
|
||||
opacity: 0.5;
|
||||
-webkit-transform: translateY(25px);
|
||||
-moz-transform: translateY(25px);
|
||||
-o-transform: translateY(25px);
|
||||
-ms-transform: translateY(25px);
|
||||
transform: translateY(25px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cs-text:hover .cs-text-mid {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition-delay: 0.3s;
|
||||
-o-transition-delay: 0.3s;
|
||||
-ms-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition-delay: 0.3s;
|
||||
-o-transition-delay: 0.3s;
|
||||
-ms-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
hidden:100vh;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.main {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@ -186,21 +185,53 @@ a{
|
||||
|
||||
/* Colors */
|
||||
|
||||
.ot-letter-left span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
||||
.ot-letter-left span:after { color: #fff; }
|
||||
.ot-letter-left:hover span:after { color: #e8e8e8; }
|
||||
.ot-letter-left span {
|
||||
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||
}
|
||||
|
||||
.ot-letter-right span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
||||
.ot-letter-right span:after { color: #fff; }
|
||||
.ot-letter-right:hover span:after { color: #e8e8e8; }
|
||||
.ot-letter-left span:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ot-letter-top span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
||||
.ot-letter-top span:after { color: #fff; }
|
||||
.ot-letter-top:hover span:after { color: #e8e8e8; }
|
||||
.ot-letter-left:hover span:after {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
.ot-letter-bottom span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
||||
.ot-letter-bottom span:after { color: #fff; }
|
||||
.ot-letter-bottom:hover span:after { color: #e8e8e8; }
|
||||
.ot-letter-right span {
|
||||
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||
}
|
||||
|
||||
.ot-letter-right span:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ot-letter-right:hover span:after {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
.ot-letter-top span {
|
||||
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||
}
|
||||
|
||||
.ot-letter-top span:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ot-letter-top:hover span:after {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
.ot-letter-bottom span {
|
||||
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||
}
|
||||
|
||||
.ot-letter-bottom span:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ot-letter-bottom:hover span:after {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
.ot-letter-left span:before,
|
||||
.ot-letter-left span:after {
|
||||
@ -210,9 +241,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-left span:before {
|
||||
-webkit-transform: scale(1.08,1) skew(0deg,1deg);
|
||||
-ms-transform: scale(1.08,1) skew(0deg,1deg);
|
||||
transform: scale(1.08,1) skew(0deg,1deg);
|
||||
-webkit-transform: scale(1.08, 1) skew(0deg, 1deg);
|
||||
-ms-transform: scale(1.08, 1) skew(0deg, 1deg);
|
||||
transform: scale(1.08, 1) skew(0deg, 1deg);
|
||||
}
|
||||
|
||||
.ot-letter-left span:after {
|
||||
@ -223,9 +254,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-left:hover span:before {
|
||||
-webkit-transform: scale(0.85,1) skew(0deg,20deg);
|
||||
-ms-transform: scale(0.85,1) skew(0deg,20deg);
|
||||
transform: scale(0.85,1) skew(0deg,20deg);
|
||||
-webkit-transform: scale(0.85, 1) skew(0deg, 20deg);
|
||||
-ms-transform: scale(0.85, 1) skew(0deg, 20deg);
|
||||
transform: scale(0.85, 1) skew(0deg, 20deg);
|
||||
}
|
||||
|
||||
.ot-letter-left:hover span:after {
|
||||
@ -242,9 +273,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-right span:before {
|
||||
-webkit-transform: scale(0.85,1) skew(0deg,1deg);
|
||||
-ms-transform: scale(0.85,1) skew(0deg,1deg);
|
||||
transform: scale(0.85,1) skew(0deg,1deg);
|
||||
-webkit-transform: scale(0.85, 1) skew(0deg, 1deg);
|
||||
-ms-transform: scale(0.85, 1) skew(0deg, 1deg);
|
||||
transform: scale(0.85, 1) skew(0deg, 1deg);
|
||||
}
|
||||
|
||||
.ot-letter-right span:after {
|
||||
@ -255,9 +286,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-right:hover span:before {
|
||||
-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
|
||||
-ms-transform: scale(0.85,1) skew(0deg,-20deg);
|
||||
transform: scale(0.85,1) skew(0deg,-20deg);
|
||||
-webkit-transform: scale(0.85, 1) skew(0deg, -20deg);
|
||||
-ms-transform: scale(0.85, 1) skew(0deg, -20deg);
|
||||
transform: scale(0.85, 1) skew(0deg, -20deg);
|
||||
}
|
||||
|
||||
.ot-letter-right:hover span:after {
|
||||
@ -274,9 +305,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-top span:before {
|
||||
-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
|
||||
-ms-transform: scale(1,0.95) skew(-4deg,0deg);
|
||||
transform: scale(1,0.95) skew(-4deg,0deg);
|
||||
-webkit-transform: scale(1, 0.95) skew(-4deg, 0deg);
|
||||
-ms-transform: scale(1, 0.95) skew(-4deg, 0deg);
|
||||
transform: scale(1, 0.95) skew(-4deg, 0deg);
|
||||
}
|
||||
|
||||
.ot-letter-top span:after {
|
||||
@ -287,9 +318,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-top:hover span:before {
|
||||
-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
|
||||
-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
|
||||
transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
|
||||
-webkit-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
|
||||
-ms-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
|
||||
transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
|
||||
}
|
||||
|
||||
.ot-letter-top:hover span:after {
|
||||
@ -306,9 +337,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-bottom span:before {
|
||||
-webkit-transform: scale(1,1.05) skew(4deg,0deg);
|
||||
-ms-transform: scale(1,1.05) skew(4deg,0deg);
|
||||
transform: scale(1,1.05) skew(4deg,0deg);
|
||||
-webkit-transform: scale(1, 1.05) skew(4deg, 0deg);
|
||||
-ms-transform: scale(1, 1.05) skew(4deg, 0deg);
|
||||
transform: scale(1, 1.05) skew(4deg, 0deg);
|
||||
}
|
||||
|
||||
.ot-letter-bottom span:after {
|
||||
@ -319,9 +350,9 @@ a{
|
||||
}
|
||||
|
||||
.ot-letter-bottom:hover span:before {
|
||||
-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
|
||||
-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
|
||||
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
|
||||
-webkit-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
|
||||
-ms-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
|
||||
transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
|
||||
}
|
||||
|
||||
.ot-letter-bottom:hover span:after {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user