Теперь, когда я узнал эффект перехода, я начал осознавать анимационные эффекты, и я осознаю еще несколько ослепительных гаджетов. Добавление эффектов анимации перехода к веб -странице заставит людей выглядеть красиво, не жестко, и хорошо смотрит. Анимация является одним из основных проявлений красоты веб -страницы. Вот несколько примеров лотереи с использованием эффектов перехода для достижения.
Давайте сначала возьмем визуализации:
Эта реализация требует некоторого кода JS.
Требуемые картинки:
Эта картина находится в месте pointer.png.
Turntable-bg.jpg Это изображение-фоновое изображение, в фоновой позиции.
Эта картина находится в ложности.
Эти три картины необходимы. Если вы хотите их реализовать, просто сохраните эти три картины и представите их в них. Если нет, пожалуйста, измените его на соответствующее имя изображения и поместите его в тот же файл.
Код:
<! Doctype html> <html lang = "en"> <Head> <meta charset = "UTF-8"> <Title> Lottery </title> <!-Вот часть CSS-> <style> #BG {Width: 650px; Высота: 600px; Поле: 0 Авто; Фон: URL (Turntable-bg.jpg) без повторного перепонки; позиция: относительно; } img [src^= "pointer"] {position: Absolute; z-index: 10; Верх: 155px; Слева: 247px; } img [src^= "Turntable"] {position: Absolute; z-index: 5; Верх: 60px; Слева: 116px; Переход: все 4s; } </style> </head> <body> <!-Вот часть структуры HTML-> <div id = "bg"> <img src = "pointer.png"> <img src = "turntable.png"> </div> <!-вот JS-часть-> <script> var opointer = document.getelementsbybyb var oturntable = document.getElementsbytagname ("img") [1]; var cat = 51,4; var num = 0; var offon = true; document.title = ""; opointer.onclick = function () {if (offon) {oturntable.style.transform = "rotate (0deg)"; offon =! offon; ataling (); }} функция rationing () {var timer = null; var rdm = 0; ClearInterval (таймер); timer = setInterval (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600);} else {oturntable.style.transform = "rotate ("+rdm+"deg)"; clearinterval (timer); settimeout () {funton () {) {) {) {) {funton; num = rdm%360; if (num <= cat*5) {alert («Бесполезное обслуживание»); } </script> </body> </html>Не так много CSS и HTML -кода, в основном для достижения настройки перехода, и для реализации каскадного позиционирования, поэтому элемент расположен для получения щелчков элементов и событий, и указатель щелчка будет вращаться, поэтому вам необходимо добавить событие щелчка в указатель, а затем определить, останавливается ли вращение. Если нет щелчка, вы не можете вызвать функцию Ratating (). Эта функция выполняет вращение поворотного стола и определяет, где остановлен указатель, а затем появляется соответствующее содержание. Процесс реализации вращения в функции состоит в том, чтобы получить элементы поворотного стола, а затем использовать JS для управления атрибутом CSS-Transform: rotate (). Разве мы не использовали это свойство, чтобы напрямую достичь эффекта вращения в CSS? Он реализован с псевдо-классным селектором: атрибуты падения и перехода. Поэтому, поскольку CSS не может реализовать операцию номера и щелчок мыши, позвольте JS реализовать и управлять атрибутом CSS, чтобы реализовать функцию вращения клика. Однако использование таймера не означает упоминание таймера. Идея состоит в том, чтобы использовать JS для реализации операции номеров, контроля атрибутов Click и CSS для достижения эффекта вращения.
Math.random () - это генерация случайных чисел, а Math.floor () вниз.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.