Сегодня мы представим, как использовать CSS3 для завершения анимации Google Doodle. Когда вы нажимаете кнопку [Start] на демо -странице, наездники и лошади на странице будут двигаться. http://demo.cuoxin.com/js/2012/googlecss3/">css3/
Здесь нужно подчеркнуть, что IE не поддерживает анимационные атрибуты CSS3, и я снова жалуюсь на злое IE. Но мы не можем использовать это как причину, чтобы не охватывать CSS3.
Сначала посмотрим на HTML -код.
<! Doctype html>
<html>
<голова>
<title> </title>
<Link rel = "styleSheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without javascript.css"/>
</head>
<тело>
<div id = "логотип">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<метка для = "play_button" id = "play_label"> </label>
<input type = "fackbox" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Ниже приведены некоторые CSS.
*{margin: 0px; падки: 0px;}
#logo {position: относительно;}
.лошадь{
Ширина: 469px;
Высота: 54px;
Фон: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {position: Absolute; слева: 0; top: 0; z-index: 1;}
#play_button {display: none;}
#play_label {
Ширина: 67px;
Высота: 54px;
дисплей: блок;
позиция: абсолютно;
Слева: 201px;
Верх: 54px;
Z-Index: 2;
}
#play_image {
позиция: абсолютно;
Слева: 201px;
Верх: 54px;
z-index: 0;
переполнение: скрыто;
Ширина: 68px;
Высота: 55px;
}
#play_image img {
позиция: абсолютно;
слева: 0;
Верх: 0;
}
Эта часть кода не слишком сложна, поэтому я не буду объяснять это подробно. Читатели, которые не очень солидны в CSS, могут задаться вопросом, как расположена кнопка [старта]. Вы можете прочитать атрибут позиции, чтобы понять конкретную функцию Absolute.
Ниже приведен эффект страницы, завершенный приведенными кодами HTML и CSS.
картинка
Давайте представим, как создавать анимационные эффекты. Сначала нам нужно определить ключевой кадр, который определяет эффект анимации на разных этапах. Вы можете узнать больше на http://www.w3schools.com/css3/css3_animations.asp.
Мы создали ключ под названием Horse-Ride, и нам нужно префикс -Webkit- или -moz- для хрома и Firefox. 0% и 100% запускайте и прекратите код соответственно. Вы можете добавить новые случаи по мере необходимости, такие как эффект анимации в 50%.
@-webkit-keyframes horse-ride {
% {фоновая позиция: 0 0;}
% {фоновая позиция: -804px 0;}
}
@-moz-keyframes horse-ride {
% {фоновая позиция: 0 0;}
% {фоновая позиция: -804px 0;}
}
Далее мы добавим анимационный эффект CSS3 для лошади.
#play_button: проверено ~ .horse {
-Вобкит-анимация: вершина лошадей 0,5S Шаги (12, конец) бесконечно;
-Вебкит-анимация задержка: 2,5 с;
-Моз-анимация: вершина лошадей 0,5S Шаги (12, конец) бесконечно;
-Моз-анимация задержка: 2,5 с;
Справочная позиция: -2412px 0;
-Вебкит-трансляция: все 2,5 с кубического звена (0,550, 0,055, 0,675, 0,190);
-Моз-трансляция: все 2,5 с кубического-бизье (0,550, 0,055, 0,675, 0,190);
}
Здесь мы сначала представляем: Проверяли и ~,: Проверяются псевдо-классы, относящиеся к эффекту CSS, когда выбирается #Play_Button, и ~ относится к братскому узлу #Play_Button.
Далее мы представляем атрибуты CSS, связанные с. Хорс. В анимации мы используем 4 значения, представляющие: KeyFrame (лошадь, которую мы определили выше), интервальное время анимации, эффект анимации и время выполнения. Затем мы устанавливаем время задержки анимации через задержку анимации. Установите анимацию перехода фона, объединив переход и фоновую позицию.
Наконец, мы добавляем эффекты анимации в кнопку [начало].
#play_button: cherced ~#play_image img {
слева: -68px;
-Вебкит-трансляция: все 0,5 с легкостью;
-Моз-трансляция: все 0,5 с легкостью;
}
Вы можете попытаться разработать это самостоятельно.
Демонстрационный адрес: Google-Doodle-Animation-In-CSS3-Without-javascript.zip Сегодня мы представим, как использовать CSS3 для завершения анимации Google Doodle. Когда вы нажимаете кнопку [Start] на демо-странице, гонщики и лошади на странице будут двигаться, http://www.mycookingroom.com/demo/google-dodle-animation-in-css3-without-javascript.html.
Здесь нужно подчеркнуть, что IE не поддерживает анимационные атрибуты CSS3, и я снова жалуюсь на злое IE. Но мы не можем использовать это как причину, чтобы не охватывать CSS3.
Сначала посмотрим на HTML -код.
<! Doctype html>
<html>
<голова>
<title> </title>
<Link rel = "styleSheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without javascript.css"/>
</head>
<тело>
<div id = "логотип">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<метка для = "play_button" id = "play_label"> </label>
<input type = "fackbox" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Ниже приведены некоторые CSS.
*{margin: 0px; падки: 0px;}
#logo {position: относительно;}
.лошадь{
Ширина: 469px;
Высота: 54px;
Фон: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {position: Absolute; слева: 0; top: 0; z-index: 1;}
#play_button {display: none;}
#play_label {
Ширина: 67px;
Высота: 54px;
дисплей: блок;
позиция: абсолютно;
Слева: 201px;
Верх: 54px;
Z-Index: 2;
}
#play_image {
позиция: абсолютно;
Слева: 201px;
Верх: 54px;
z-index: 0;
переполнение: скрыто;
Ширина: 68px;
Высота: 55px;
}
#play_image img {
позиция: абсолютно;
слева: 0;
Верх: 0;
}
Эта часть кода не слишком сложна, поэтому я не буду объяснять это подробно. Читатели, которые не очень солидны в CSS, могут задаться вопросом, как расположена кнопка [старта]. Вы можете прочитать атрибут позиции, чтобы понять конкретную функцию Absolute.
Ниже приведен эффект страницы, завершенный приведенными кодами HTML и CSS.
картинка
Давайте представим, как создавать анимационные эффекты. Сначала нам нужно определить ключевой кадр, который определяет эффект анимации на разных этапах. Вы можете узнать больше на http://www.w3schools.com/css3/css3_animations.asp.
Мы создали ключ под названием Horse-Ride, и нам нужно префикс -Webkit- или -moz- для хрома и Firefox. 0% и 100% запускайте и прекратите код соответственно. Вы можете добавить новые случаи по мере необходимости, такие как эффект анимации в 50%.
@-webkit-keyframes horse-ride {
% {фоновая позиция: 0 0;}
% {фоновая позиция: -804px 0;}
}
@-moz-keyframes horse-ride {
% {фоновая позиция: 0 0;}
% {фоновая позиция: -804px 0;}
}
Далее мы добавим анимационный эффект CSS3 для лошади.
#play_button: проверено ~ .horse {
-Вобкит-анимация: вершина лошадей 0,5S Шаги (12, конец) бесконечно;
-Вебкит-анимация задержка: 2,5 с;
-Моз-анимация: вершина лошадей 0,5S Шаги (12, конец) бесконечно;
-Моз-анимация задержка: 2,5 с;
Справочная позиция: -2412px 0;
-Вебкит-трансляция: все 2,5 с кубического звена (0,550, 0,055, 0,675, 0,190);
-Моз-трансляция: все 2,5 с кубического-бизье (0,550, 0,055, 0,675, 0,190);
}
Здесь мы сначала представляем: Проверяли и ~,: Проверяются псевдо-классы, относящиеся к эффекту CSS, когда выбирается #Play_Button, и ~ относится к братскому узлу #Play_Button.
Далее мы представляем атрибуты CSS, связанные с. Хорс. В анимации мы используем 4 значения, представляющие: KeyFrame (лошадь, которую мы определили выше), интервальное время анимации, эффект анимации и время выполнения. Затем мы устанавливаем время задержки анимации через задержку анимации. Установите анимацию перехода фона, объединив переход и фоновую позицию.
Наконец, мы добавляем эффекты анимации в кнопку [начало].
#play_button: cherced ~#play_image img {
слева: -68px;
-Вебкит-трансляция: все 0,5 с легкостью;
-Моз-трансляция: все 0,5 с легкостью;
}
Вы можете попытаться разработать это самостоятельно.
Демонстрация Адрес: http://xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar