التقديم هو كما يلي:
نقاط المعرفة المستخدمة في تطوير قطعة أثرية اعتراف يوم الملكة في الثامن من مارس: مشاهد css33D، والتحولات ثلاثية الأبعاد، ومهارات صنع الحب، ومهارات صنع المكعبات ثلاثية الأبعاد، والرسوم المتحركة المخصصة، وعمليات عقدة JS DOM الأصلية، والحلقات، وما إلى ذلك.
:point_down:كود HTML:
<div id=display> </div> <div class='heart3d'> <div class='rib1'></div> <div class='rib2'></div> <div class='rib3'> </div> <div class='rib4'></div> <div class='rib5'></div> <div class='rib6'></div> <div class='rib7'></ شعبة> <ديف class='rib8'></div> <div class='rib9'></div> <div class='rib10'></div> <div class='rib11'></div> <div class= 'rib12'></div> <div class='rib13'></div> <div class='rib14'></div> <div class='rib15'></div> <div class='rib16'></div> <div class='rib17'></div> <div class='rib18'></div> <div class='rib19'></div> <div class= 'rib20'></div> <div class='rib21'></div> <div class='rib22'></div> <div class='rib23'></div> <div class='rib24'></div> <div class='rib25'></div> <div class='rib26'></div> <div class='rib27'></div> <div class= 'rib28'></div> <div class='rib29'></div> <div class='rib30'></div> <div class='rib31'></div> <div class='rib32'></div> <div class='rib33'></div> <div class='rib34'></div> <div class='rib35'></div> <div class= 'rib36'></div> <div class=per> <div class=img><img width=50 height=50 src=images/1.jpg /></div> <div class=img><img العرض=50 الارتفاع=50 src=images/2.jpg /></div> <div class=img><img width=50 height=50 src=images/3.jpg /></div> <div class= img><img width=50 height=50 src=images/4.jpg /></div> <div class=img><img width=50 height=50 src=images/5.jpg /></div> <div class=img><img width=50 height=50 src=images/6.jpg /></div> </div> </div>
:point_down:كود CSS:
<style>/*خزانة أوراق أنماط Css*/ *{margin:0px;padding:0px;}/*إزالة الهوامش الخارجية والهوامش الداخلية الافتراضية*/ body{background:#000;} .heart3d { الموضع: مطلق الأعلى: 0؛ اليمين: 0؛ الأسفل: 0؛ اليسار: 0؛ العرض: 100 بكسل؛ الارتفاع: 160 بكسل؛ نمط التحويل: الحفاظ على ثلاثي الأبعاد؛ الرسوم المتحركة: تدور 15 ثانية خطيًا لا نهائيًا؛ } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [class^=rib] { الموضع: العرض المطلق: 100px الارتفاع: 160px; الحدود: الصلبة #f22613; عرض الحدود: 1px 1px 0 0; (45 درجة) ترجمة X (30px)؛ } .heart3d [class$=2] {تحويل: تدويرY(20deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=3] { تحويل: تدويرY(30deg) تدويرZ(45deg) ترجمةX(30px) } .heart3d [class$=4] {تحويل: تدويرY(40deg) تدويرZ(45deg) ترجمةX(30px); .heart3d [class$=5] { تحويل: RotateY(50deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=6] { تحويل: RotateY(60deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=7] { تحويل: تدويرY(70deg) تدويرZ(45deg) ترجمةX(30px) } .heart3d [class$=8] { تحويل: RotateY(80deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=9] { تحويل: RotateY(90deg) RotateZ(45deg) TranslateX(30px }); .heart3d [class$=10] { تحويل: تدويرY(100deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=11] { تحويل: تدويرY(110deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=12] { تحويل: تدويرY(120deg) تدويرZ(45deg) TranslationX(30px); } .heart3d [class$=13] { تحويل: RotateY(130deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=14] { تحويل: RotateY(140deg) RotateZ(45deg) TranslateX(30px); تدويرY(150 درجة) تدويرZ(45 درجة) ترجمة X(30px }); .heart3d [class$=16] { تحويل: تدويرY(160deg) تدويرZ(45deg) ترجمة X(30px); .heart3d [class$=18] { تحويل: تدويرY(180deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=19] { تحويل: تدويرY(190deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=20] { تحويل: تدويرY(200deg) تدويرZ(45deg) TranslationX(30px); } .heart3d [class$=21] { تحويل: RotateY(210deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=22] { تحويل: RotateY(220deg) RotateZ(45deg) TranslateX(30px); - التحويل: تدوير Y (230 درجة) تدوير Z (45 درجة) ترجمة X (30 بكسل)؛ تحويل: RotateY(230deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=24] { تحويل: RotateY(240deg) RotateZ(45deg) TranslateX(30px); تحويل: تدويرY (250 درجة) تدوير Z (45 درجة) ترجمة X (30px })؛ .heart3d [class$=26] { تحويل: تدويرY(260deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=27] { تحويل: تدويرY(270deg) تدويرZ(45deg) ترجمةX(30px }); .heart3d [class$=28] { تحويل: تدويرY(280deg) تدويرZ(45deg) ترجمة X(30px); } .heart3d [class$=29] { تحويل: تدويرY(290deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=30] { تحويل: تدويرY(300deg) تدويرZ(45deg) TranslationX(30px); } .heart3d [class$=31] { تحويل: RotateY(310deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=32] { تحويل: RotateY(320deg) RotateZ(45deg) TranslateX(30px); تدويرY(330 درجة) تدويرZ(45 درجة) ترجمة X(30px }); .heart3d [class$=34] { تحويل: تدويرY(340deg) تدويرZ(45deg) ترجمةX(30px); } .heart3d [class$=35] { تحويل: تدويرY(350deg) تدويرZ(45deg) ترجمةX(30px }); .heart3d [class$=36] { تحويل: تدويرY(360deg) تدويرZ(45deg) TranslationX(30px); } @keyframes spin { to { تحويل: RotateY(360deg) RotateX(360deg); } .per{ width:50px;height:50px;position:absolute;top:0;left:0;right: 0;أسفل:0; الهامش:تلقائي;نمط التحويل: الحفاظ على 3d;المنظور:800px } .img{width:50px;height:50px;position:absolute;backface-visibility:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; (30 بكسل) تدويرX(90 درجة)؛} .img:nth-child(2){top:50px;left:0;transform-origin:top; تحويل:translateZ(30px) RotateX(-90deg);} .img:nth-child(3){top:0px ;left:-50px;transform-origin:right;translateZ(30px) RotateY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; اليسار:0;التحويل:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:كود جافا سكريبت:
<script> var i = 0; var str1 = بالنسبة لمنتج صفحات الويب، يجب ألا تكون لغة HTML غير مألوفة، لأن لغة HTML هي الأساس لجميع عمليات إنتاج صفحات الويب. ولكن إذا كانت الصفحة ملائمة لمستخدمي الإنترنت للاستخدام، وودية وسخية، حتى مثل تطبيق سطح المكتب، فإن الاعتماد فقط على لغة HTML ليس كافيًا، حيث تلعب JavaScript دورًا مهمًا في هذا. var str = إذا كنت تحب شخصًا ما وتبقى في حالة حب، يمكنك الذهاب للنزهة معًا في أوائل الربيع، والاستمتاع بزهرة اللوتس معًا في منتصف الصيف، ومشاهدة القمر معًا في الخريف الفاتح، والبحث عن أزهار البرقوق معًا في أواخر الشتاء، دون أن تحصل على أي شيء. تعبت من ذلك، ولكن سعيدة، غير عادية، ولكن عادية. وحينها لن يكون هناك ندم في هذه الحياة. window.onload = function Typing(){ var mydiv = document.getElementById(display); mydiv.innerHTML += str.charAt(i); (typing,100); if(i==str. length){ ClearTimeout(id); mydiv.innerHTML += //alert(اكتمل تنفيذ البرنامج!); تلخيصما ورد أعلاه هو أداة تطوير HTML5 لاعترافات عيد الملكة التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!