تعديل على الدرس السابق باضافة كلمة الى القلب النابض ليصبح قلب نابض بالحب ،انظر المثال:
Love
استمتعوا بالاضافة
المثال
Love
عدل على الكود في الدرس السابق او استبدله بالتالي :
اولا في منطقة جسم البرنامج <body> ضيف الكود التالي :
ثانيا في منطقة الهيد <head> ضيف الكود التالي :
.bom1{width:150px;
height:150px;background-color:rgba(255,0,255,0.3);padding-top:45px;padding-right:45px;
}
.bom2{color:#000000;float:left;
-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;}
.bombom1{
position: relative;
width: 100px;
height: 90px;
}
.bombom1:before,
.bombom1:after {
z-index: -1;
position: absolute;
content: "";
left: 50px;
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%;
-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;
}
.bombom1:after {
z-index: -1;
left: 0;
-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%;
-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;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bom {
from {width:54px; height:84px;font-size:25px; color:black;text-shadow: 2px 2px 8px #FF0000;}
to { width:50px; height:80px;font-size:12px; color:transparent;}
}
/* Standard syntax */
@keyframes bom {
from { width:54px; height:84px;font-size:25px; color:black;text-shadow: 2px 2px 8px #FF0000;}
to { width:50px; height:80px; font-size:12px; color:transparent;}
}
ثالثا: نضيف خاصية الحركة keyframes في نهاية الكود اعلاه بمنطقة الهيد <head> وهي الخاصية المسؤولة عن الحركة في المثال اعلاه مع التنويه ان الرسم اعلاه كلة بالكود دون استخدام اي برنامج رسم جرب ذلك بنفسك.
الكود keyframes :
/* Chrome, Safari, Opera */
@-webkit-keyframes bom {
from {width:54px; height:84px;font-size:25px; color:black;text-shadow: 2px 2px 8px #FF0000;}
to { width:50px; height:80px;font-size:12px; color:transparent;}
}
/* Standard syntax */
@keyframes bom {
from { width:54px; height:84px;font-size:25px; color:black;text-shadow: 2px 2px 8px #FF0000;}
to { width:50px; height:80px; font-size:12px; color:transparent;}
}
ليست هناك تعليقات:
إرسال تعليق