Animasyon Saat / Pure Css Clock - HTML5 - CSS3 - Ders23
Bu video uygulamamızda css ve html kullanarak, hatta sadece css kullanarak keyframes ve animation özellikleriyle biraz border ve background ile oynayarak bir saat yaptık ve bu küçük uygulamamızın kodlarını aşağıdaki linkten paylaştık.
Videolarımızı beğenmeyi ve kanalımıza abone olmayı unutmayın.
Bu gibi birçok uygulamaya ve tek sayfa responsive web sitesi uygulamamıza kanalımızdan ulaşabilirsiniz.
HTML İÇERİĞİ:
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: #262626;
}
.saat{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
border: 15px solid lightblue;
border-radius: 50%;
background: url(saat.png);
background-size: cover;
box-shadow: -2px 2px 0 blue, inset 0 0 20px rgba(0,0,0,0.5);
}
.saat:before{
content: '';
position: absolute;
top: calc(50% - 3px);
left: 50%;
width: 40%;
height: 5px;
background: #262626;
border-radius: 3px;
animation: yelkovan 6s linear infinite;
transform-origin: left;
}
@keyframes yelkovan{
0%{transform: rotate(-90deg);}
100%{transform: rotate(270deg);}
}
.saat:after{
content: '';
position: absolute;
top: calc(50% - 3px);
left: 50%;
width: 30%;
height: 5px;
background: #262626;
border-radius: 3px;
animation: akrep 60s linear infinite;
transform-origin: left;
}
@keyframes akrep{
0%{transform: rotate(-90deg);}
100%{transform: rotate(270deg);}
}
span{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: lightblue;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 1;
}
Yorumlar
Yorum Gönder