Рендеринг выглядит следующим образом:
Очки знаний, использованные при разработке артефакта «Исповедь ко Дню королевы 8 марта»: css33D-сцены, 3D-преобразования, навыки занятий любовью, навыки создания 3D-кубов, пользовательские анимации, собственные операции с узлами 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'></ div> <div 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 width=50 height=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 { Position: Absolute; 0; справа: 0; внизу: 0; слева: 0; ширина: 100 пикселей; высота: центр: центр; Transform-style: save-3d; анимация: вращение 15 секунд, бесконечная линейная } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left; :100px;top:100px;} .heart3d [class^=rib] { позиция: абсолютная ширина: 100 пикселей высота: 160 пикселей; граница: сплошная #f22613; граница-ширина: 1px 1px 0 0; граница-радиус: 50% 50% 0 / 40% 50% 0 } .heart3d [class$=1] { Transform: RotateY(10deg) RotateZ (45 градусов) TranslateX (30 пикселей) } .heart3d [класс$=2]; { Transform: RotateY(20deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=3] { Transform: RotateY(30deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=4] { Transform: RotateY(40deg) RotateZ(45deg) TranslateX(30px) } .heart3d); [class$=5] { Transform: RotateY(50deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=6] { Transform: RotateY(60deg) RotateZ(45deg) TranslateX(30px); [класс $=7] { Transform: RotateY(70deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=8] { Transform: RotateY(80deg) RotateZ(45deg) TranslateX(30px) } .heart3d [class$=9] { Transform: RotateY(90deg) RotateZ(45deg) TranslateX(30px); .heart3d [class$=10] { Transform: RotateY(100deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=11] { Transform: RotateY(110deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=12] { Transform: RotateY(120Deg) RotateZ(45Deg); TranslateX(30px); } .heart3d [класс$=13] {transform: RotateY(130deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=14] { Transform: RotateY(140deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=15] { Transform: RotateY (150 градусов) RotateZ (45 градусов) TranslateX (30 пикселей) }; .heart3d [class$=16] { Transform: RotateY(160deg) RotateZ(45deg) TranslateX(30px) } .heart3d [Class$=17] { Transform: RotateY(170deg) RotateZ(45deg) TranslateX(30px); .heart3d [class$=18] { Transform: RotateY(180deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=19] { Transform: RotateY(190deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=20] { Transform: RotateY(200Deg) RotateZ(45Deg) translateX(30px); } .heart3d [класс$=21] {transform: RotateY(210deg) RotateZ(45deg) TranslateX(30px } .heart3d [class$=22] { Transform: RotateY(220deg) RotateZ(45deg) TranslateX(30px } .heart3d [class$=23] { -webkit); -transform: RotateY (230 градусов) RotateZ (45 градусов) TranslateX (30 пикселей); Transform: RotateY(230deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=24] { Transform: RotateY(240deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=25] {; преобразование: RotateY (250 градусов) RotateZ (45 градусов) TranslateX (30 пикселей) }; .heart3d [class$=26] { Transform: RotateY(260deg) RotateZ(45deg) TranslateX(30px) } .heart3d [Class$=27] { Transform: RotateY(270deg) RotateZ(45deg) TranslateX(30px); .heart3d [class$=28] { Transform: RotateY(280deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=29] { Transform: RotateY(290deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=30] { Transform: RotateY(300deg) RotateZ(45Deg) TranslateX(30px); } .heart3d [класс$=31] {transform: RotateY(310deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=32] { Transform: RotateY(320deg) RotateZ(45deg) TranslateX(30px); } .heart3d [class$=33] { Transform: RotateY (330 градусов) RotateZ (45 градусов) TranslateX (30 пикселей) }; .heart3d [class$=34] { Transform: RotateY(340deg) RotateZ(45deg) TranslateX(30px) } .heart3d [Class$=35] { Transform: RotateY(350deg) RotateZ(45deg) TranslateX(30px); .heart3d [class$=36] { Transform: RotateY(360deg) RotateZ(45deg) TranslateX(30px); } @keyframes spin { to { Transform: RotateY(360deg) RotateX(360Deg) } .per{ ширина:50px;высота:50px;position:absolute;top:0;left:0;right: 0; дно: 0; поле: авто; стиль преобразования: сохранение-3d; перспектива: 800 пикселей; .img{ширина:50 пикселей;высота:50 пикселей;позиция:абсолютная;обратная видимость:скрытый } .img:nth-child(1){top:-50px;left:0;transform-origin:translateZ; (30 пикселей) RotateX(90 градусов);} .img:nth-child(2){top:50px;left:0;transform-origin:top; Transform:translateZ(30px) RotateX(-90deg);} .img:nth-child(3){top:0px ;left:-50px;transform-origin:right; Transform:translateZ(30px) RotateY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; влево:0;transform:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:код JavaScript:
<script> var i = 0; var str1 = Для производителя веб-страниц язык HTML не должен быть незнаком, поскольку язык HTML является основой для создания всех веб-страниц. Но если страница может быть удобной для использования пользователями сети, дружелюбной и щедрой, даже как настольное приложение, то полагаться только на язык HTML недостаточно, важную роль в этом играет JavaScript. ; var str = Если вы любите кого-то и остаетесь влюбленными, вы можете вместе отправиться на прогулку ранней весной, вместе насладиться лотосами в середине лета, вместе наблюдать за луной светлой осенью и вместе искать цветение сливы в конце зимы, не получая при этом никаких результатов. устал от этого, но счастлив, необыкновенен, но обычен. Тогда в этой жизни не будет сожалений. ; window.onload = типизация функции () { var mydiv = document.getElementById(display); mydiv.innerHTML += str.charAt(i); var oBtn = document.getElementById('btn'); var id = setTimeout; (ввод, 100); if(i==str.length){clearTimeout(id); mydiv.value =; mydiv.innerHTML += //alert(Выполнение программы завершено!); Подвести итогВышеупомянутый инструмент разработки HTML5 для исповеди ко Дню Королевы, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!