Kod:
Yine'İyi!İş'Cıkardım1
HTML
<Kanklar1998>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Nasıldım!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
<p class="Kanklar1998">http://destek.10tl.net/Bekleriz<i class="fa fa-refresh fa-spin fa-1x fa-fw"></i></p>
<p class="Kanklar1998">http://destek.10tl.net/Bekleriz<i class="fa fa-refresh fa-spin fa-1x fa-fw"></i></p>
<p class="Kanklar1998">http://destek.10tl.net/Bekleriz<i class="fa fa-refresh fa-spin fa-1x fa-fw"></i></p>
<div id="picture">
<div class="pic_transform">
<div class="text_display">
<h>Bu'Vatan'Bizim'</h>
</div>
</div>
</div>
<div class="Kanklar1998">
<html>
<head>
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="demos.css" />
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript">
$(function() {
$("#ac").click(function(){//aç butonuna tıklanırsa
$(".kutu").show("bounce");//kutu clasına sahip objeyi bounce efekti ile aç
});
$("#kapat").click(function(){//kapat butonuna tıklanırsa
$(".kutu").hide("bounce");//kutu efektini bounce ile kapat
});
/*fold-blind-bounce-clip-drop-explode-fade-highlight-puff-pulsate-scale-shake-slide-size-transfer*/
});
</script>
<style type="text/css">
body{font-size:17px;}
.kutu{width:250px;height:150px;background-color:red;color:#fff;text-align:center;border-radius:1em;padding:50px;box-sizing:border-box;-webkit-box-sizing:border-box; }
</style>
</head>
<body>
<button id="ac">aç</button>
<button id="kapat">kapat</button>
<div
<link href='https://fonts.googleapis.com/css?family=Arvo:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:300,100' rel='stylesheet' type='text/css'>
<span class="outline end-right">
</span>
<span class="outline end-left">
</span>
<span class="orbs">
<span>M</span>
<span>e</span>
<span>r</span>
<span>h</span>
<span>a</span>
<span>b</span>
<span>a</span>
</span>
<span class="glow">
BRIGHT
</span>CSS
Kod:
body{
background:url("images/1.jpg");
animation:image 5s infinite alternate;
-webkit-animation:image 5s infinite alternate;
-moz-animation:image 5s infinite alternate;
}
@keyframes image{
0%{
background:url("images/1.jpg");
}
25%{
background:url("images/2.jpg");
}
50%{
background:url("images/3.jpg");
}
75%{
background:url("images/4.jpg");
}
100%{
background:url("images/5.jpg");
}
}
body{
background-color:Red;
animation:image 10s infinite alternate;
-webkit-animation:image 10s infinite alternate;
-moz-animation:image 10s infinite alternate;
}
@keyframes image{
0%{
background-color:red;
}
25%{
background-color:blue;
}
50%{
background-color:yellow;
}
75%{
background-color:green;
}
100%{
background-color:black;
}
}
.Kanklar1998{
background: #FFF6BF;
border-top: 3px solid #FFD324;
border-bottom: 3px solid #FFD324;
text-align: center;
margin: 10px auto;
padding: 5px 20px;
}
.Kanklar1998 {
background: #D6ECA6;
border-top: 3px solid #8DC93E;
border-bottom: 3px solid #8DC93E;
text-align: center;
margin: 10px auto;
padding: 5px 20px;
}
.Kanklar1998 {
background: #ADCBE7;
border-top: 3px solid #0F5C8E;
border-bottom: 3px solid #0F5C8E;
text-align: center;
margin: 10px auto;
padding: 5px 20px;
}
birnisan {width: 100%;height: 100%;-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}
#picture {
width: 200px;
height: 200px;
background: url('http://www.muratoner.net/images/test.jpg') no-repeat;
background-size: 200px 200px;
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-radius: 100px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.pic_transform {
line-height:50px;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
overflow: hidden;
height: 0px;
}
#picture:hover .pic_transform {
height: 50px;
}
.text_display {
transform-origin: top;
transition-duration: 0.5s;
-webkit-transform-origin: top;
-webkit-transition-duration: 0.5s;
-moz-transform-origin: top;
-moz-transition-duration: 0.5s;
-o-transform-origin: top;
-o-transition-duration: 0.5s;
font-size: 16px;
font-family: Arial;
font-weight: normal;
text-align:center;
color: #FFF;
}
#picture:hover .text_display {
background: rgba(0, 0, 0, 0.5);
color: #fff;
height:100px;
}
.(** ! Küfür Etmek Yasaktır - Oto Filtre ! **){
float:left;
height: 200px;
width: 200px;
margin: 20px;
overflow: hidden;
border-radius: 50%;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.(** ! Küfür Etmek Yasaktır - Oto Filtre ! **)>img{
height:200px;
width:200px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
}
.(** ! Küfür Etmek Yasaktır - Oto Filtre ! **)>img:hover{
border-radius:0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
@import "bourbon";
*{
box-sizing: border-box;
}
body{
background: black;
}
span{
margin: 0;
padding: 0;
}
.end-left{
margin-left: -235px;
}
.end-right{
margin-right: -117.5px;
}
.outline{
position: absolute;
top: 20px;
}
.outline{
color: black;
-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: orange;
font-size: 64px;
font-family: 'Arvo', serif;
}
.orbs{
font-family: 'Raleway', sans-serif;
font-weight: 100;
display: block;
font-size: 128px;
span{
color: red;
display: inline-block;
text-align: center;
border-radius: 50%;
text-shadow: 0 0 20px orange, 1px 1px 20px orange, 2px 2px 20px orange, -1px -1px 20px orange, -2px -2px 20px orange;
position: absolute;
left: 50%;
&:first-child{
margin-left: -210px;
}
&:not(:first-child){
margin-left: -35px;
}
}
}
.glow{
opacity: 0;
font-family: 'Arvo', serif;
font-weight: 300;
color: orange;
margin-left: -222.5px;
font-size: 105px;
position: absolute;
top: 200px;
left: 50%;
}
Java
var $orbs = $('.orbs span');
$('.end-right').css('left' , '-10%');
$('.end-left').css('left', '110%');
$orbs.velocity({'top': '-300px', scaleX: '.2', scaleY: '.2', color: '#990000'},0);
var orb = 0;
var numOrbs = $orbs.length;
$('.end-right').velocity({left : '50%'}, 'easeOutExpo', 1200);
$('.end-left').velocity({left : '50%'}, 'easeOutExpo', 1200);
dropOrbs = function(){
$orbs.eq(orb).velocity({top: '70px'}, 400).velocity({scaleX: 1, scaleY: 1, color: '#fff'}, 1000).css('position', 'relative');
orb = orb + 1;
if(orb < numOrbs){
setTimeout(dropOrbs, 100);
}
else{
setTimeout(function(){$('.glow').velocity({opacity: 1}, 1200);}, 1200);
}
}
setTimeout(dropOrbs, 400);
Hayırlı'Uğurlu'Olsun
Demo:https://codepen.io/kanklar1998/pen/gXQwGv
