Daire Logo Animasyon / Circle Logo Animation - HTML5 - CSS3 - Ders31
Bu video uygulamamızda html ile div ler sayesinde 3 daire oluşturduk ve index dosyamız içerisinde.
bu div leri style css dosyamızda şekillendirdik ve keyframes ile hareketlendirerek web sitemiz için güzel bir logo uygulaması yaptık. Sizlerde günlük video uygulamalarımızdan haberdar olmak isterseniz kanalımıza abone olmayı unutmayın. Uygulamada yazılan tüm kodlar aşağıdaki linkte açıkça paylaşılmıştır.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Logo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div class="center">
<div class="daire1"></div>
<div class="daire2"></div>
<div class="daire3"></div>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: url(back.jpg);
background-size: cover;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 250px;
box-sizing: border-box;
}
.daire1{
width: 100%;
height: 100%;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: #f1c40f #e74c3c #9b59b6 #2ecc71;
box-sizing: border-box;
animation: d1 10s linear infinite;
}
.daire2{
position: absolute;
top: 16px;
left: 16px;
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
border: 4px dashed white;
animation: d2 15s linear infinite;
}
.daire3{
position: absolute;
top: 20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background: url(logo.jpg);
background-size: cover;
animation: d1 3s linear infinite;
}
@keyframes d1{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@keyframes d2{
0%{transform: rotate(360deg);}
100%{transform: rotate(0deg);}
}
Yorumlar
Yorum Gönder