الرسم باستخدام الكود فقط....!!!!!



مرحبا بكم اعزائنا متابعي مدونة التكنولوجيا ... الرسم باستخدام الكود فقط ، دون الحاجة لاستخدام اي من برامج الرسم والحركة مثل الفوتوشوب او الفلاش على سبيل المثال لا الحصر،الصورة المرفقة هي صورة لدائرة متحركة مع دوران وكذلك وجود الظل لهذه الدائرة .... لمتابعة حركتها انظر الفيديو المرفق مع الشرح الكامل لطريقة التركيب داخل المواقع ... مع امكانية اضافة اي تحسينات ترونها مناسبة، ان اعجبتكم الفكرة ، تابعوا معي الشرح الوافي لطريقة التركيب......



فيديو يوضح الية العمل :





 طريقة التركيب:
اولا : في منطقة البدي<body>  بعدها مباشرة اكتب تعريف لادوات العمل . نحتاج منطقة عمل شاملة ، بداخلها رسم الدائرة وخارجها الظل لهذه الدائرة ، يعني نحتاج لثلاث اماكن عمل . كتالي:


نسميها مثلا بالتسميات الموضحة في الصورة ويمكنك تغييرها لاي اسم اخر (al  all al1).

 ثانيا : نعرف المنطقة العامة باستخدام كود css مثل الطول العرض الخلفية الموقع بالصفحة والحدود انظر الصورة:
مع الاخذ بعين الاعتبار ان هذا الكود يكتب في منطقة الهيدر ويبدا بستايل كما هو موضح اعلاه .

 ثالثا:نبدأ برسم الدائرة وتحديد اللون والشكل والحدود بالاضافة الى تسمية الحركة ومدتها وشكلها  التي تمر بها الدائرة انظر الصورة ادناه:
رابعا: نبدأ برسم ظل الدائرة وطريقة الحركة وشكلها واسمها ونلاحظ في الصورة اننا ادرجنا خاصية الترانزفورم لتصبح مائلة مثل الظل تماما ، بالاضافة الى اننا نسمينا الحركة باسم جديد يختلف عن الاسم لحركة الدائرة انظر الصورة ادناه:
خامسا: والاهم هو تحديد الحركة واستدعائها للعمل بخاصية كيفريم انظر الصورة :
وهكذا بعد تجميع كل هاي الاكواد في ملف واحد تصبح لديك الاضافة ، الشكل النهائي للملف:


<head>

<style type="text/css">

.al{width:560px;
height:110px;
background:transparent;
border-bottom:2px solid black;
float:left;
border-radius: 50px;
margin-left:50px;
}
.all{width: 100px;
height: 100px;
background: red;
border-radius:50%;
float:left;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
border-bottom:6px solid black;
border-top:6px solid darkblue;
border-left:6px solid darkred;
border-right:6px solid blue;
box-shadow:10px 10px 50px 20px pink inset;
}
.all1{  width: 115px;
height: 115px;
background:black;
border-radius:50%;
float:left;
margin-top:79px;
margin-left:-489px;
position: relative;
opacity:0.1;
border-bottom:6px solid black;
border-top:6px solid darkblue;
border-left:6px solid darkred;
border-right:6px solid blue;
-webkit-transform: rotateX(115deg); /* Safari */
transform: rotateX(115deg); /* Standard syntax */
-webkit-animation: mymove1 5s infinite; /* Chrome, Safari, Opera */
animation: mymove1 5s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}




/* Standard syntax */
@keyframes mymove {
from   {left: 0px; }
 
to {left: 450px; -ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px; }
 
to{left: 450px;  -ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove1 {
from {left: 0px;}
to {left: 450px;}
}

@keyframes mymove1 {
from {left:0px;}
to {left: 450px;}
}


</style>
</head>
<body>
<div class="al">
<div class="all" ></div>
</div>
<div class="all1"></div>

</body>
بالتوفيق....

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)