اضافة القلب النابض باستخدام الكود فقط دون الحاجة الى استخدام اي برامج اخرى مثل الفوتوشوب او الفلاش ،فقط باستخدام الكود :
مثال
القلب النابض
يحتاج تنفيذ مثل هذه الحركات الى معرفة ودراية باوامر css3 وتحديدا keyframes وكذلك animation code ، نبدأ الشرح:
القلب النابض:
في البداية نكتب الكود التالي في منطقة جسم البرنامج <body>
ثم نكتب الكود التالي في منطقة الهيد <head> تبدأ باستخدام <style type="texet/css">اكتب الكود التالي هنا</style>.
.bombom{
position: relative;
width: 200px;
height:200px;
padding-left:50px;
z-index:0px;}
.bombom:before,
.bombom:after {
z-index:2;
position: absolute;
content: "";
left: 80px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
box-shadow: inset 1px 0px 5px 3px red, inset 1px 5px 3px 0px darkred;
-webkit-animation-name: bom; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: bom;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bombom:after {
z-index: 1;
left: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
box-shadow: inset 1px 0px 5px 3px red, inset 1px 5px 3px 0px darkred;
-webkit-animation-name: bom; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: bom;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
position: relative;
width: 200px;
height:200px;
padding-left:50px;
z-index:0px;}
.bombom:before,
.bombom:after {
z-index:2;
position: absolute;
content: "";
left: 80px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
box-shadow: inset 1px 0px 5px 3px red, inset 1px 5px 3px 0px darkred;
-webkit-animation-name: bom; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: bom;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bombom:after {
z-index: 1;
left: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
box-shadow: inset 1px 0px 5px 3px red, inset 1px 5px 3px 0px darkred;
-webkit-animation-name: bom; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: bom;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
الان نأتي الى الجزء المهم وهو استخدام الامر keyframes وتكتب الجمل التالية بعد الكود السابق مباشرة في منطقة الهيد بين جملة style كما هو موضح اعلاة :
/* Chrome, Safari, Opera */
@-webkit-keyframes bom{
from {width:54px; height:84px;}
to { width:50px; height:80px;}
}
/* Standard syntax */
@keyframes bom {
from { width:54px; height:84px;}
to { width:50px; height:80px; }
}
نلاحظ ان الكود اعلاة بدأ الحركة اللانهائية من خلال تكبير القلب المرسوم بالكود من حجمة الطبيعي الى حجم اكبر ومن ثم العودة الى الحجم الطبيعي ليبدأ من جديد وهكذا ليصبح في النهاية قلب نابض .
*القلب اعلاه في المثال مرسوم باستخدام الكود فقط دون ان نحتاج الى اي برنامج رسم اخر.
شكرا لكم
ليست هناك تعليقات:
إرسال تعليق