📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
kurutemizlemescripti.demodesign.com.tr
/
css
📝
bubbles.css
← Geri Dön
.ball { display: inline-block; width: 100%; height: 100%; border-radius: 100%; position: relative; background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); } .ball:before { content: ""; position: absolute; top: 1%; left: 5%; width: 90%; height: 90%; border-radius: 100%; background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%); -webkit-filter: blur(5px); filter: blur(5px); z-index: 2; } .ball:after { content: ""; position: absolute; display: none; top: 5%; left: 10%; width: 80%; height: 80%; border-radius: 100%; -webkit-filter: blur(1px); filter: blur(1px); z-index: 2; -webkit-transform: rotateZ(-30deg); transform: rotateZ(-30deg); } .ball.bubble-new { background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4)); width: 100px; height: 100px; opacity:0.3; } .ball.bubble-new:before { -webkit-filter: blur(0); filter: blur(0); height: 80%; width: 40%; background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%); -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); } .ball.bubble-new:after { display: block; background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); } .l1,.l2,.l3,.l4,.l5,.r1,.r2,.r3,.r4,.r5{position:absolute;} .l1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); /* opacity: 0.2;*/ -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; } .l2 { left: 20%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); /* opacity: 0.5;*/ -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; } .l3 { left: 35%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); /* opacity: 0.3;*/ -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; } .l4 { left: 45%; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); /* opacity: 0.35;*/ -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; } .l5 { left: 15%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); /* opacity: 0.3; */ -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; } .r1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); /* opacity: 0.2;*/ -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; } .r2 { right: 22%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); /* opacity: 0.5;*/ -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; } .r3 { right:38%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); /* opacity: 0.3;*/ -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; } .r4 { right: 40%; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); /* opacity: 0.35;*/ -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; } .r5 { right: 18%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); /* opacity: 0.3; */ -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; } @-webkit-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } } @-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } @-moz-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } } @-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } @-o-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } } @-o-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula