| Server IP : 122.155.17.190 / Your IP : 216.73.216.89 Web Server : Apache/2 System : Linux cat17190.thaihostserver.com 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 User : bungkla ( 1054) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/bungkla/public_html/css/ |
Upload File : |
html {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: inherit;
}
a {
color: #333;
text-decoration: none;
}
html {
width: 100%;
height: 100%;
}
body {
background: url(../pic/bg1200.png);
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
padding: 38px;
}
h1 {
width: 100%;
text-align: center;
padding: 38px 0;
}
.open {
position: fixed;
top: 40px;
right: 40px;
width: 50px;
height: 38px;
display: block;
cursor: pointer;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.open:hover {
opacity: 0.8;
}
.open span {
display: block;
float: left;
clear: both;
height: 4px;
width: 40px;
border-radius: 40px;
background-color: #fff;
position: absolute;
right: 3px;
top: 3px;
overflow: hidden;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.open span:nth-child(1) {
margin-top: 5px;
z-index: 9;
}
.open span:nth-child(2) {
margin-top: 5px;
}
.open span:nth-child(3) {
margin-top: 5px;
}
.sub-menu {
-webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
height: 0;
width: 0;
right: 0;
top: 0;
position: absolute;
background-color: rgba(38, 84, 133, 0.54);
border-radius: 50%;
z-index: 18;
overflow: hidden;
}
.sub-menu li {
display: block;
float: right;
clear: both;
height: auto;
margin-right: -160px;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sub-menu li:first-child {
margin-top: 180px;
}
.sub-menu li:nth-child(1) {
-webkit-transition-delay: 0.05s;
}
.sub-menu li:nth-child(2) {
-webkit-transition-delay: 0.10s;
}
.sub-menu li:nth-child(3) {
-webkit-transition-delay: 0.15s;
}
.sub-menu li:nth-child(4) {
-webkit-transition-delay: 0.20s;
}
.sub-menu li:nth-child(5) {
-webkit-transition-delay: 0.25s;
}
.sub-menu li a {
color: #fff;
font-family: 'Lato', Arial, Helvetica, sans-serif;
font-size: 16px;
width: 100%;
display: block;
float: left;
line-height: 38px;
}
.oppenned .sub-menu {
opacity: 1;
height: 400px;
width: 400px;
}
.oppenned span:nth-child(2) {
overflow: visible;
}
.oppenned span:nth-child(1), .oppenned span:nth-child(3) {
z-index: 100;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.oppenned span:nth-child(1) {
-webkit-transform: rotate(45deg) translateY(12px) translateX(12px);
transform: rotate(45deg) translateY(12px) translateX(12px);
}
.oppenned span:nth-child(2) {
height: 400px;
width: 400px;
right: -160px;
top: -160px;
border-radius: 50%;
background-color: rgba(38, 84, 133, 0.54);
}
.oppenned span:nth-child(3) {
-webkit-transform: rotate(-45deg) translateY(-10px) translateX(10px);
transform: rotate(-45deg) translateY(-10px) translateX(10px);
}
.oppenned li {
margin-right: 168px;
}
.button {
display: block;
float: left;
clear: both;
padding: 10px 20px;
background: #fff;
border-radius: 3px;
border: 2px solid #FB398B;
overflow: hidden;
position: relative;
}
.button:after {
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
content: "";
position: absolute;
height: 200px;
width: 400px;
-webkit-transform: rotate(45deg) translateX(-540px) translateY(-100px);
transform: rotate(45deg) translateX(-540px) translateY(-100px);
background: #FB398B;
z-index: 1;
}
.button:before {
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
content: attr(title);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
z-index: 2;
text-align: center;
padding: 20px 40px;
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
.button:hover {
text-decoration: none;
}
.button:hover:after {
-webkit-transform: translateX(-300px) translateY(-100px);
transform: translateX(-300px) translateY(-100px);
}
.button:hover:before {
-webkit-transform: translateY(0);
transform: translateY(0);
}