- Katılım
- 5 Aralık 2019
- Mesajlar
- 40
- Elmaslar
- 32
- Puanlar
- 0
- Yaş
- 23
- Minecraft
- YusufAliGungor
Selam MC-TR !
Bu forumda'ki ilk konum. Sizlere sitenizi şık hale getirecek arka plan kodunu vereceğim. Bu kod sitenin arka planını hareketli yapar şekiller bottom'dan top'a doğru gider. Kodu dilediğiniz gibi değiştirip kullanabilirsiniz. Anlaşılır ve sade bir kod.
Bu forumda'ki ilk konum. Sizlere sitenizi şık hale getirecek arka plan kodunu vereceğim. Bu kod sitenin arka planını hareketli yapar şekiller bottom'dan top'a doğru gider. Kodu dilediğiniz gibi değiştirip kullanabilirsiniz. Anlaşılır ve sade bir kod.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>YAG Design - Örnek Kod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="area" >
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div >
<script src="js/main.js"></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Exo', sans-serif;
}
.context {
width: 100%;
position: absolute;
top:50vh;
}
.context h1{
text-align: center;
color: #fff;
font-size: 50px;
}
.area{
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height:100vh;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}Kodları gerekli css ve html dökümanlarına yazarsanız hiçbir sıkıntı çıkmadan çalıştırabilirsiniz. Şimdiden iyi tasarımlar arkadaşlar.
