Can sıkıntısından yaptım, bazı monitörlerde kayma olabilir, sorunu çözünce güncellerim.
Html;
CSS;
Demo ;
Html;
PHP Kod:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bakımdayız..</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<center> <div class="arkaplan">
<div class="yazi">
<i class="fas fa-cog fa-spin fa-xs"></i>
<h1>Sitemiz yapım aşamasındadır.</h1>
</div>
</div>
</center>
<div>
<div>
</div>
</div>
</html>
PHP Kod:
@import url('https://fonts.googleapis.com/css?family=Lobster');
body {
}
.arkaplan {
background-image: linear-gradient(270deg, #d83b3b, #e3ed20, #20ed2d, #2082ed, #cd20ed, #20edbe, #ff1493) !important;
background-size: 1200% 1200% !important;
animation: arkaplan 20s linear infinite;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
font-weight: 900;
}
@-moz-keyframes arkaplan {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}
@-webkit-keyframes arkaplan {
0% { color: #FF1919; }
15% { color: #E019FF; }
30% { color: #4F19FF; }
45% { color: #19A7FF; }
60% { color: #19FFDC; }
75% { color: #65FF19; }
90% { color: #FFE019; }
}
@-webkit-keyframes arkaplan {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes arkaplan {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes arkaplan {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}@keyframes arkaplan {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.arkaplan {
background: #ff0000;
position: relative;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
transition:.2s ease;
box-shadow:0 1px 1px rgba(0,0,0,.2);
}
.yazi {
color: #ffffff;
font-family: 'Lobster', cursive;
font-size: 200px;
position: relative;
left: 37%;
top: 35%;
position:absolute;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
}
.yazi:hover
{
z-index:2;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
PHP Kod:
https://gundemajansi.com/bakim/
