السلام عليكم ورحمه الله وبركاته
اليوم اقدم لكم موضوع رائع
اضافه تأثير السباحه كما بالصوره فوق
او يمكن المعاينه مباشره من خلال هذا الرابط
نأتي الان الي شرح التركيب
اولا قم بالبحث داخل القالب عن
</head>
واضف فوقه الكود التالي
<style>
@keyframes inky-float {
0% {transform: translateY(0%);}
50% {transform: translateY(2%);}
100% {transform: translateY(0%);}
}
@-webkit-keyframes inky-float {
0% {-webkit-transform: translateY(0%);}
50% {-webkit-transform: translateY(2%);}
100% {-webkit-transform: translateY(0%);}
}
</style>
الان قم بالذهاب الي كود ( سي اس اس ) العنصر الذي تريد اضافه له التأثير
يكون علي هذا الشكل
واضف له الكود التالي
animation-name:inky-float;
-webkit-animation-name:inky-float;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
ليصبح بهذا الشكل
.here { animation-name:inky-float;
-webkit-animation-name:inky-float;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite; }
الان قم بالضغط علي حفظ
معلومات التدوينه !
