Как анимировать логотип html
Перейти к содержимому

Как анимировать логотип html

  • автор:

Создание анимации для логотипа сайта

Author24 — интернет-сервис помощи студентам

Размер логотипа бут анимации
Всем доброго дня. В линуксе совсем новичок, решил на днях попробовать. Поставил последнюю минт.

Создание логотипа для игры
Здравствуйте все, с прошедшими! Подскажите в каком формате и каких размеров должен создаватса.

Создание логотипа для магазина обуви
нужен логотип интернет магазина на тему мужской и женской обуви -в логотипе должны быть 2-4.

Поиск анимации (GIF) для сайта
В нете полно сервисов по поиску иконок для сайтостроения с возможностью выбора ключевых слов.

dev — investigator

Эксперт JSЭксперт HTML/CSS

2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696

Лучший ответ

Сообщение было отмечено wonoidar как решение

Решение

wonoidar, к примеру — песочница

div>span>STRV/span>/div>
1 2 3 4 5 6
@import url('https://fonts.googleapis.com/css?family=Muli:800'); div{position:relative;height:40px;width:100px;overflow:hidden;} span{position:absolute;left:0;font-family: 'Muli', sans-serif;font-size:30px;color:red;padding:0 10px;cursor:pointer;transition:.3s;} span:after{content:"STRV";color:black;position:absolute;padding:0 10px;} span:hover{left:-100px;transition:.3s;} span:hover:after{left:100px;transition:.3s;}

1081 / 643 / 240
Регистрация: 05.05.2015
Сообщений: 3,559
Записей в блоге: 2

wonoidar, там белые буквы реализованы с помощью background-image у псевдоэлемента :after. visibility у псевдоэлемента стоит hidden, поэтому он не виден до наведения мыши.
При наведении срабатывает :hover, у его :after уже меняется visibility и opacity на visible и 1 соответственно.
Уход в темноту красной надписи и появление белой реализованы с помощью transition.
Понятно объяснил?

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Набор энтузиастов для создания сайта по рисованию анимации
Данный проект осуществляется на Canvas, а конкретно редактор где создаются анимации. Так же этот.

Создание одной анимации для двух наборов спрайтов?
Здравствуйте, у меня есть два персонажа с одинаковой анимацией на двух текстурных атласах. Скажите.

Удаление логотипа с сайта
Подскажите как правильно сделать удаление аватарки с сайта. Я сделала вот так сама кнопка удалить.

Мерцание логотипа сайта
Добрый день. Я новичок в Jquery. Есть задача ,сделать на сайте,что логотип мерцал. Есть рабочий.

Или воспользуйтесь поиском по форуму:

Как сделать анимацию логотипа?

Заказчик хочет сделать анимированный логотип, хочет добавить эффект движения.

Рассматривает 2 варианта:

1) Запустить крутиться планету — тогда нужно искать для нее полную модель глобуса и чтобы она начинала крутиться с такого ракурса материков, как сейчас изображено на лого. Таким образом планета будет крутиться, а буквы «Мир принадлежит тебе» будут стоять на месте. Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг земного шара.

2) Если планету запустить не получится, тогда нужно запустить надпись «Мир принадлежит тебе», тоже с прокруткой в левую сторону вокруг планеты.

5d68f2987ab39810726613.jpeg

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

  • Вопрос задан более трёх лет назад
  • 1862 просмотра

2 комментария

Простой 2 комментария

Анимация логотипа сайта

Читаю книгу Джефа Раскина «Интерфейс» и хочется обсудить идеи, которые приходят во время чтения.
Первая идея об анимации на сайтах.

Анимация нужна всем элементам, которые что-то делают. Ссылка меняет цвет при наведении, а фотография, которую можно увеличить по клику, даёт знать о себе иконкой, фоном или текстом, в общем анимацией.

Анимированный логотип Дропбокса

Обратная связь
Анимация помогает понять, что можно нажать, а что нет.
Лого сайта, всегда ведёт на главную страницу — это все признали, но кто делает анимацию этому жесту? А ведь он один из самых важных. Пользователи постоянно кликают на логотип.

Научно: Во время того, как пользователь ведёт курсор к логотипу, в его локусе внимания логотип, не курсор. А как пользователю даётся понять: нажми и попади домой? Курсор меняет свою форму из стрелочки в руку. То есть, только сменив локус, мы можем понять, что что-то изменилось. Люди не хотят менять локус, и это в любом случаи стоит энергии, которую человеческий организм пытается расходовать экономно.

При пристальном сосредоточении внимания все события вне локуса могут игнорироваться или просто оставаться незамеченными.

Анимация должна быть направлена на логотип. Пусть он немного пошевелится, немного изменит себя и даст понять пользователю: «Кликай, я что-то могу!»

Увеличивающиеся кнопки и крутящийся логотип

Думаю, Вы, скорее всего, в курсе, как менять стиль элементов при наведении на них указателя мыши. А знаете ли Вы, как можно сделать настоящую плавную анимацию кнопок и крутящийся логотип только лишь посредствам файла таблицы стилей? Если стало интересно, то читайте дальше…

Такую задачу реализовать совсем не сложно, нужно лишь прибегнуть к помощи CSS3. А так как этот стандарт уже все больше и больше завладевает просторами интернета и из «стандарта будущего» становится «стандартом настоящего», то очень советую обратить на него внимание.

Итак, от философских размышлений давайте перейдем к делу. Кстати, то, что у нас получится Вы можете увидеть, щелкнув по иконке «Демо». А в «Исходниках» Вы, как всегда, найдете все исходные файлы.

CSS3: Увеличивающиеся кнопки и анимированный крутящийся логотип

1. Начнем мы, как всегда, с создания html-файла. Я буду использовать синтаксис HTML5, и код моего файла будет достаточно прост, так как создам я лишь шапку сайта, в которой будет содержаться заголовок; кнопки навигации, помещенные в ненумерованный список и изображение логотипа. Больше ничего у нас в файле и не будет, но здесь нам больше ничего и не нужно, так как основная работа будет вестись над кнопками и логотипом.

Вот код нашего html-файла:

Как Вы можете видеть из кода, вся наша шапка заключена в тег «header», и он, в свою очередь, содержит: заголовок; навигацию в теге «nav» и изображение логотипа.

Также в начале Вы можете видеть подключенный файл таблицы стилей. Пока что мы его еще не создали, поэтому наша страница выглядит вот так.

2. Теперь наша задача создать тот самый файл таблицы стилей, который в нашей верстке уже подключен. Создайте файл «style.css» и сохраните его в том же каталоге, что и наш html-файл.

Давайте для начала мы придадим нашей шапке более или менее упорядоченный вид, то есть расставим все элементы на свои места.

Пропишите в файле таблицы стилей следующий код:

body header header h1 < text-align:right; padding-right:50px; font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#666; text-shadow:2px 2px 2px #999>#logo nav nav a nav li

Здесь все просто. Сначала мы задаем ширину для тега «body», а также выравниваем его по центру.

Всему блоку шапки «header» мы устанавливаем высоту и ширину, рамку, а также, относительное позиционирование, что в дальнейшем позволит нам позиционировать логотип относительно тега «header».

Заголовку «h1» мы присваиваем выравнивание по правому краю, отступ справа, тип и размер шрифта, а также цвет шрифта и тень от текста.

Логотип (имеющий идентификатор «logo») мы позиционируем абсолютно и устанавливаем для него значения «top» и «left», тем самым определяя его место в нашей шапке.

Блоку, содержащему кнопки (тег «nav») мы присвоим обтекание по правому краю и соответствующие отступы.

У ссылок убираем подчеркивание и присваиваем им цвет.

Тегам «li», в каждом из которых находится ссылка, мы зададим отступы, рамку, скругление, цвет кнопок, тип, размер и толщину шрифта, тень для кнопок, уберем ненужные точки ненумерованного списка, а также зададим обтекание слева, чтобы наши кнопки стояли не в столбец, а в строку.

После применения этих стилей наша шапка будет выглядеть следующим образом.

3. Вот теперь давайте сделаем так, чтобы при наведении указателя мыши на наши кнопки, они немного увеличивались в размерах и меняли свой цвет.

Основным CSS-свойством для создания таких преобразований является transform. Его значение представляет собой тип желаемого преобразования. При помощи этого свойства можно не только изменять размеры элемента, но и поворачивать его на определенный градус, наклонять и т.д.

CSS преобразования появились относительно недавно, поэтому данное свойство все еще нужно применять с префиксами производителей браузеров.

В качестве значения для «transform» мы будем использовать «scale» (изменение масштаба) с небольшим значением.

Чтобы задать стили для кнопок при наведении на них указателя мыши, мы будем использовать псевдокласс «:hover».

Итак, следующий код пропишите в Вашей таблице стилей:

nav li:hover

Если сейчас Вы проверите страницу в браузере и наведете указатель мыши на любую из кнопок, то увидите, как она увеличивается и меняет свой цвет. Но происходит это резко и не очень красиво. Было бы неплохо придать этому эффекту плавности, чтобы увеличение происходило, например, за пол секунды.

Здесь нам поможет свойство transition, которое и позволит осуществить плавный переход, а по сути, анимацию. Его нужно применить к исходному стилю, то есть к стилю до начала анимации. В его параметрах мы передадим над какими стилями мы будем производить анимацию и за какое время.

Свойство «transition» мы также будем использовать с префиксами.

Сейчас все, что нам нужно сделать – это добавить в стили для «nav li» следующий код:

-webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s;

Вот сейчас наша анимация будет происходить плавно, и если Вы обновите страницу в браузере и наведете указатель мыши над любой из кнопок, то увидите это.

4. А теперь переходим к вращению логотипа. Я будут создавать эффект вращения при наведении на логотип указателя мыши. Кстати, можно сделать, чтобы вращение происходило сразу, как пользователь попадает на страницу. Для этого, далее, вместо применения стилей к «#logo:hover», применяйте стили к «#logo».

Я хочу добиться эффекта, чтобы при наведении указателя мыши на логотип, он сначала вращался по часовой стрелки, а потом против и в конце останавливался.

CSS предлагает нам еще один очень мощный механизм для создания анимации. Мы можем создавать анимацию не только от одного стиля к другому, как мы это делали в случае с кнопками, а от одного к другому, к третьему и так далее.

Для этого создаются ключевые кадры (keyframes). Ключевой кадр в анимации – это отдельный кадр в анимации, определяющий внешний вид сцены.

Первым делом нужно настроить ключевые кадры. Здесь дело также не обойдется без префиксов. Возможно, Вам покажется, что это немного громоздко, но так нужно, чтобы анимация работала во всех популярных браузерах.

Просто добавьте следующий код в свою таблицу стилей.

@-webkit-keyframes logo < from50% to > @-moz-keyframes logo < from50% to > @-o-keyframes logo < from50% to > @keyframes logo < from50% to >

Смотрите, здесь мы создаем анимацию. «logo» – это имя анимации, по которой мы далее к ней будем обращаться.

«from» – это первый кадр анимации, он определяет начальную позицию вращения (0 градусов).

«50%» – это второй кадр анимации, в нем наша фигура будет вращена на -720 градусов.

«to» – это последний кадр анимации, и в нем фигура опять возвращается на исходную позицию (0 градусов).

Как видите, в нашей анимации 3 кадра: фигура вращается по часовой стрелке, потом обратно и останавливается. Но кадров, как Вы понимаете может быть и больше.

Сам по себе этот код ничего не делает. Если Вы сейчас попробуете перезагрузить страницу и навести указатель мыши на логотип, то ничего не изменится. Этот код только задает правила для анимации.

А чтобы нам ее реализовать нужно прописать еще небольшой кусочек кода.

#logo:hover

Здесь мы присваиваем нашему логотипу псевдокласс «:hover» и прописываем свойство «animation» (как всегда с префиксами). В параметрах мы укажем имя нашей анимации и ее длительность.

Вот и все. Можно обновить страницу в браузере, навести указатель мыши на логотип и насладиться анимацией.

К сожалению, через скриншот невозможно показать анимацию, но нажав на иконку «Демо» Вы сможете все увидеть.

Это лишь простой пример, а если поэкспериментировать, то можно сделать еще много всего интересного. Тем более, что это далеко не все свойства анимации и переходов в CSS3.

Однако, согласитесь, что это очень здорово иметь возможность создавать несложные анимационные эффекты (а возможно, у Вас получатся и более сложные) при помощи одной лишь таблицы стилей, и не прибегая к помощи сторонних программ.

На этом сегодня у меня все. Как всегда, жду Ваших комментариев.

Делитесь уроком при помощи кнопок социальных сетей и подписывайтесь на обновления блога. Обещаю Вам много всего интересного.

С Вами была Анна Котельникова.

Успехов Вам, друзья! Учитесь, развивайтесь, генерируйте креативные идеи. В общем творите!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *