<div id="cookies"> <p>Buraya Duyuruları ekleyebilirsiniz!</p> <p><a href="#" _fcksavedurl="#" id="close-cookies">Kapat</a></p> </div> <style> #cookies { display: none; width: 100%; height: 70px; padding-top: 30px; position: absolute; background: #fcf8e3 ; border-bottom: 2px solid #fbeed5; color: #c09853; text-align: center; top: 0; left: 0; z-index: 9999;} #cookies > p { margin: 0 0 10px 0; font-weight: bold;} #cookies > p a { color: #332b17; text-decoration: none;} #cookies.display { display: block; /* Cross browser animation */ -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */ -moz-animation: cookies 1s 1; /* Firefox 5-15 */ -ms-animation: cookies 1s 1; /* IE9 */ -o-animation: cookies 1s 1; /* Opera 12.00 */ animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */} @keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); } } @-webkit-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); } } @-moz-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); } } @-o-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); } } .close-cookies { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } </style> <script>/* Cookies */ $(document).ready(function(){ $("#cookies").addClass("display"); $("#close-cookies").click(function(){ event.preventDefault(); $("#cookies").addClass("close-cookies"); }); });</script>

Kopyala !