Css sallanan resim efekti
How do I make an css sallanan resim efekti?
Css sallanan resim efekti . What is a css sallanan resim efekti? How do you make a css sallanan resim efekti? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.
Css sallanan resim efekti - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css sallanan resim efekti </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img class="sallan" src="http://gravatar.com/avatar/7124bc62949227ac21a52e9533e6d478?s=512" />
<img class="sallan" src="http://gravatar.com/avatar/7124bc62949227ac21a52e9533e6d478?s=512" style=" animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; "
/>
<img class="sallan" src="http://gravatar.com/avatar/7124bc62949227ac21a52e9533e6d478?s=512" style=" animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; "
/> <div class="copyright"><font style="float:right; margin-right:30px;">Copyright © 2013 - Ayhan ALTINOK </font>İletişim bilgileri :<font style="color:#505050"> Web Adresi:</font> www.graphicsfamily.com <font style="color:#505050"> Mail :</font> [email protected] <font style="color:#505050">Facebook: </font>www.facebook.com/ayhanaltinokesk</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Css sallanan resim efekti - Script Codes CSS Codes
.sallan{ -webkit-animation:sallan 10s ease-in-out 0s infinite; -moz-animation:sallan 10s ease-in-out 0s infinite; animation:sallan 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0; width:200px;margin:20px;
}
@-webkit-keyframes sallan{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(4deg); } 40% { -webkit-transform: rotate(-3deg); } 45% { -webkit-transform: rotate(2deg); } 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes sallan{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); }
}
@keyframes sallan{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 40% { transform: rotate(-3deg); } 45% { transform: rotate(2deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); }
}
body{ margin:0px; padding:0px; background: #171717;
}
.copyright{width:100%;height:auto; background-color:#171717;color:#aaa;position:fixed; bottom:0px;font: 12px Arial;padding:5px;opacity:0.4;border-top:#a00 2px solid;z-index:99999;left:0px;right:0px;}.copyright:hover{opacity:1}
/* Ayhan Altınok*/
@-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(4deg); } 40% { -webkit-transform: rotate(-3deg); } 45% { -webkit-transform: rotate(2deg); } 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); }
}
@keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 40% { transform: rotate(-3deg); } 45% { transform: rotate(2deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); }
}
Css sallanan resim efekti - Script Codes JS Codes
/*------------İLETİŞİM BİLGİLERİ------------------
Ayhan ALTINOK - Copyright 2013
Facebook Adresim: www.facebook.com/AyhanALTINOKesk
Mail Adresim :[email protected]
------------------------------------------------*/
Developer | Ayhan ALTINOK |
Username | AyhanALTINOK |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,476 Kb |
Views | 52,624 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Jquery Fare Animasyonu - Jquery Mouse Animation | 2,600 Kb |
Slider | 3,174 Kb |
Facebook Responsive Lightbox | 4,661 Kb |
A Pen by Ayhan ALTINOK | 49,465 Kb |
Akordion slayt -acordion slide | 3,256 Kb |
Galeri efekti | 2,054 Kb |
Menu | 2,158 Kb |
Css galeri | 2,640 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | 3,448 Kb |
Css3 animasyon | 3,191 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Blank Starter | Mhartington | 2,171 Kb |
RSW | JordanC | 3,726 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!