Sadece HTML ve CSS kullanarak (javascript ve jquery kullanmadan) hazırlanan bir havaifişek uygulamasını internetten incelerken üzerinde hafif değişiklikler de yaparak bir internet sitesinin yıl dönümü için kullandım.
Benzer bir uygulama arayışında olan arkadaşlar için kodları paylaşıyorum, aşağıdaki HTML ve CSS kodları ile herhangi bir eklenti ya da paket kurmadan havaifişek animasyonunu sitenize ekleyerek kullanabilirsiniz.
HTML
<div class="sayfa">
<div class="birinci"></div>
<div class="ikinci"></div>
</div>
CSS
$kivilcim: 80;
$genislik: 200;
$yukseklik: 200;
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $kivilcim {
$box-shadow: $box-shadow,
random($genislik)-$genislik / 2 + px
random($yukseklik)-$yukseklik / 1.2 + px
hsl(random(360), 100, 50);
$box-shadow2: $box-shadow2, 0 0 red
}
@mixin keyframes ($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@-ms-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@mixin animation-delay ($settings) {
-moz-animation-delay: $settings;
-webkit-animation-delay: $settings;
-o-animation-delay: $settings;
-ms-animation-delay: $settings;
animation-delay: $settings;
}
@mixin animation-duration ($settings) {
-moz-animation-duration: $settings;
-webkit-animation-duration: $settings;
-o-animation-duration: $settings;
-ms-animation-duration: $settings;
animation-duration: $settings;
}
@mixin animation ($settings) {
-moz-animation: $settings;
-webkit-animation: $settings;
-o-animation: $settings;
-ms-animation: $settings;
animation: $settings;
}
@mixin transform ($settings) {
transform: $settings;
-moz-transform: $settings;
-webkit-transform: $settings;
-o-transform: $settings;
-ms-transform: $settings;
}
body {
margin:0;
padding:0;
background: #000;
overflow: hidden;
}
.sayfa > .birinci, .sayfa > .ikinci {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: $box-shadow2;
@include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
.sayfa > .after {
@include animation-delay((1.25s, 1.25s, 1.25s));
@include animation-duration((1.25s, 1.25s, 6.25s));
}
@include keyframes(bang) {
to {
box-shadow:$box-shadow;
}
}
@include keyframes(gravity) {
to {
@include transform(translateY(200px));
opacity: 0;
}
}
@include keyframes(position) {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
Editör editi: sitede yer alan bazı diğer benzer başlıklar için;
bkz: Html ve Css ile bütün internet sitesini siyah beyaz yapmak
bkz: HTML ve CSS ile kayan yazı yapmak
bkz: CSS ile gradient arka plan (background) yapmak
bkz: CSS ile Display Flex içinde ortalama yapmak
bkz: CSS Flexbox order Özelliği ile Sıralama Yapmak
bkz: HTML ve CSS ile body yüksekliğini %100 yapmak