Я создал этот трехмерный дизайн, используя чистый HTML, CSS и несколько строк JavaScript. Вы можете найти его в прямом эфире на моем сайте здесь. Код доступен на моем GitHub здесь.
Это пошаговое руководство по созданию этого дизайна. Чтобы это объяснение было кратким, я остановлюсь только на основных этапах.
Требования
- Хорошее понимание HTML и CSS.
- Частичное понимание JavaScript
Как создать этот дизайн
Примечание. Если в какой-то момент вы застряли в этом, не стесняйтесь проверить элемент на моем веб-сайте или взгляните на мою кодовую базу. Ссылки можно найти выше.
Шаг 1: создайте файлы index.html
и styles.css
. Свяжите таблицу стилей с файлом HTML.
Шаг 2. Сделайте элемент <body>
гибким блоком, который центрирует его содержимое по горизонтали и вертикали.
html,body { height: 100%; margin: 0; padding: 0; } body { flex-direction: column; background-color: rgba(0,0,0, 0.88); display: flex; align-items: center; justify-content: center; }
Шаг 3. Создайте контейнер (<div id="container">
) внутри <body>
, который будет служить контейнером для всех маленьких зеленых квадратов, которые с этого момента мы будем называть minis.
Шаг 4. Задайте для контейнера div некоторую статическую ширину и высоту и большое значение свойства перспективы (например, 40 бэр для каждого). Мы даем ему opacity: 0
, потому что он будет постепенно увеличиваться, как только мы динамически добавим в него все квадраты.
#container { width: 40em; height: 40em; perspective: 40em; opacity: 0; transition: opacity 0.5s ease-in-out; }
Шаг 5. Создайте свой mini
квадратный класс.
.mini { width: 10%; height: 10%; float: left; background: green; /* or whatever color you want! */ transform: rotateY(100deg) rotateX(50deg); }
Свойство float: left
заставит мини-буквы заполнять строку за строкой, как при написании предложений в английском эссе, а не столбец за столбцом. Свойство transform
будет наклонять мини в одном направлении.
Шаг 6. Используя Javascript, динамически создайте и добавьте 100 миниатюр в свой контейнер после загрузки страницы.
window.onload = function() { var container = document.getElementById("container"); for(var i = 1; i < 101; i++) { var mini = document.createElement("div"); mini.classList.add("mini"); mini.style.opacity = (i%11)/11; container.appendChild(mini); } container.style.opacity = 1; }
Часть непрозрачности может показаться запутанной. Во-первых, поймите, что каждый i
, который делится на 11, будет иметь непрозрачность 0, потому что i % 11
будет равно 0. Затем помните, что в строке 10 квадратов. Это означает, что для каждой строки квадрат с opacity: 0
будет на один квадрат справа от строки над ним. Вот как мы получаем диагональную линию без квадратов. Та же самая логика применима к каждой диагонали. Все квадраты на каждой диагонали имеют одинаковую прозрачность.
Спасибо за внимание!
Если у вас есть какие-либо вопросы, оставляйте комментарии ниже или пишите мне по адресу:
[email protected]