ANKA (RED ve Underground) Tim için hazırladıgım Tam sayfa index
Anka timi için html , css ve javascript ile hazırladıgım animasyonlu tam sayfa indexi
videosu :
Anka timi için html , css ve javascript ile hazırladıgım animasyonlu tam sayfa indexi
Hızlıresim
Hızlı video yükleme paylaşma servisi. Videolarınızı saniyeleri içerisinde yükleyip paylaşın.
video.hizliresim.com
index.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>HACKED</title>
<!-- style /css/ -->
<style type="">
/*imports*/
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&family=Rubik+Glitch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
body {
display: flex;
background-image: url(https://i.hizliresim.com/414jt3w.png);
justify-content: center;
}
body::after {
position:absolute;
content: 'ANKA';
font-size: 400px;
z-index: -2;
opacity: 0.2;
color: aliceblue;
}
.animation {
position:absolute;
width: 400px;
height: 400px;
/**/
left: 50%;
top: 50%;
transform: translate(-65%, -50%);
/**/
}
.animation .ani_w{
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
animation: animation_cr 4s linear infinite;
}
.animation div:nth-child(1) {
border: 15px solid transparent;
border-top-color: rgb(154, 0, 0);
border-radius: 50%;
}
.animation div:nth-child(3) {
border: 15px solid transparent;
border-bottom-color: rgb(219, 104, 10);
border-radius: 50%;
}
.img {
position: absolute;
box-sizing:border-box;
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
border-radius: 50%;
z-index: -1;
}
#hep {
font-family: 'Inconsolata', monospace;
font-size: 40px;
letter-spacing: 60px;
animation: hepani 0.2s linear infinite;
}
@keyframes hepani {
from{color: transparent;}
to{text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
}}
@keyframes animation_cr {
from { transform: rotate(0deg);border-width: 15px; box-shadow: 0px 0px 50px rgb(154, 0, 0);}
to {transform: rotate(360deg);border-width: 15px;box-shadow: 0px 0px 50px rgb(219, 104, 10);}
}
.fleft {
position:absolute;
transform: translateY(56%);
left: 0;
margin-left: 150px;
}
.fleft span {
display: block;
font-family: 'Quantico', sans-serif;
font-size: 100px;
color: transparent;
background-image: url(https://media.giphy.com/media/X9tF9O0v4UQ3V6oU7o/giphy.gif);
background-position: center;
-webkit-background-clip: text;
}
.fright {
position:absolute;
transform: translateY(56%);
right: 0;
margin-right: -7px;
}
.fright span {
display: block;
font-family: 'Quantico', sans-serif;
font-size: 100px;
color: transparent;
background-image: url(https://media.giphy.com/media/X9tF9O0v4UQ3V6oU7o/giphy.gif);
background-position: center;
-webkit-background-clip: text;
}
#undf {
font-size: 80px;
}
#undtr {
transform: translateX(120px);
}
#undr {
font-size: 80px;
}
#undtl {
transform: translateX(-45px);
}
.marq p {
font-family: 'Quantico', sans-serif;
}
.marq span {
padding:0 12px;
}
#bmq {
bottom: 30px;
}
#bmq .spbm {
font-family: 'Rubik Glitch', cursive;
padding:0 12px;
}
#bmq span:nth-child(2){
color: rgb(191, 0, 0);
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px rgb(255, 4, 0),
0 0 82px rgb(255, 4, 0),
0 0 92px rgb(255, 4, 0);
}
#bmq span:nth-child(4){
color: rgb(124, 119, 119);
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px rgb(168, 168, 168),
0 0 82px rgb(168, 168, 168),
0 0 92px rgb(168, 168, 168);
}
</style>
<!-- style /css/ -->
</head>
<body>
<div class="fleft">
<span id="undr">RED</span><span id="undtl">TEAM</span>
</div>
<div class="animation">
<div class="ani_w"></div>
<div class="img"><img name="anmg" src="" alt="" width="100%" height="100%"></div>
<div class="ani_w"></div>
</div>
<div class="fright">
<span id="undf">UNDERGROUND</span><span id="undtr">TEAM</span>
</div>
<p id="hep">HACKED BY </p>
<marquee class="marq" scrollamount = "7" width="60%" direction="left" height="60px" style="position:absolute;color:white;">
<p><span>İstediğimiz zaman istediğimiz yerde!!!</span>
<span style="font-size: 17px; border:2px solid white;">TURKHACKTEAM.org</span></p>
</marquee>
<marquee id="bmq" class="marq" scrollamount = "7" width="60%" direction="right" height="60px" style="position:absolute;color:white;">
<span style="font-size:22px;">Greetz :</span>
<span class="spbm" style="font-size:35px;">ZoRRoKiN</span>
<span>---</span>
<span class="spbm" style="font-size:35px;">Veteran7</span>
</marquee>
<script>
var i = 0;
var images = ['https://i.hizliresim.com/m9RCVr.png','https://i.hizliresim.com/KN8sEJ.png'];
var duration = 2000; /*2s(ms=2000)*/
function imganimation() {
document.anmg.src = images[i];
if (i < images.length -1) {
i++;
}else {
i = 0;
}
setTimeout("imganimation()",duration);
}
window.onload = imganimation;
</script>
</body>
</html>
Son düzenleme:
