Файловый архив студентов. Файловый архив студентов.
1261 вуз, 4625 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Гомельский Государственный Технический Университет им. П.О. Сухого
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Записка диплом (корр).docx
Скачиваний:
9
Добавлен:
11.09.2019
Размер:
1.98 Mб
Скачать
☆
►Содержание►

Приложение в

Программный код создания анимационного меню

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- saved from url=(0066)http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html -->

<html lang="en" class="translated-ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Морфинг Кубы питания</title>

<style type="text/css" media="screen">

body {

background-color: black;

color: white;

font-family: 'Lucida Grande', Verdana, Arial;

font-size: 12px;

background-image: -webkit-gradient(radial,

50% 500, 1,

50% 500, 400,

from(rgba(255, 255, 255, 0.3)),

to(rgba(255, 255, 255, 0)));

background-repeat: no-repeat;

}

#container {

width: 100%;

height: 700px;

-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */

-webkit-perspective-origin: 50% 225px;

}

#stage {

width: 100%;

height: 100%;

-webkit-transition: -webkit-transform 2s;

-webkit-transform-style: preserve-3d;

}

#shape {

position: relative;

top: 160px;

margin: 0 auto;

height: 200px;

width: 200px;

-webkit-transform-style: preserve-3d;

}

.plane {

position: absolute;

height: 200px;

width: 200px;

border: 1px solid white;

-webkit-border-radius: 12px;

-webkit-box-sizing: border-box;

text-align: center;

font-family: Times, serif;

font-size: 35pt;

color: black;

background-color: rgba(255, 255, 255, 0.6);

-webkit-transition: -webkit-transform 2s, opacity 2s;

-webkit-backface-visibility: hidden;

}

#shape.backfaces .plane {

-webkit-backface-visibility: visible;

}

#shape {

-webkit-animation: spin 8s infinite linear;

}

@-webkit-keyframes spin {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-360deg); }

}

/* ---------- cube styles ------------- */

.cube > .one {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);

}

.cube > .two {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);

}

.cube > .three {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);

}

.cube > .four {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);

}

.cube > .five {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);

}

.cube > .six {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);

}

.cube > .seven {

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);

}

.cube > .eight {

-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);

}

.cube > .nine {

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);

}

.cube > .ten {

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);

}

.cube > .eleven {

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);

}

.cube > .twelve {

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);

}

/* ---------- ring styles ------------- */

.ring > .one {

-webkit-transform: translateZ(380px);

}

.ring > .two {

-webkit-transform: rotateY(30deg) translateZ(380px);

}

.ring > .three {

-webkit-transform: rotateY(60deg) translateZ(380px);

}

.ring > .four {

-webkit-transform: rotateY(90deg) translateZ(380px);

}

.ring > .five {

-webkit-transform: rotateY(120deg) translateZ(380px);

}

.ring > .six {

-webkit-transform: rotateY(150deg) translateZ(380px);

}

.ring > .seven {

-webkit-transform: rotateY(180deg) translateZ(380px);

}

.ring > .eight {

-webkit-transform: rotateY(210deg) translateZ(380px);

}

.ring > .nine {

-webkit-transform: rotateY(-120deg) translateZ(380px);

}

.ring > .ten {

-webkit-transform: rotateY(-90deg) translateZ(380px);

}

.ring > .eleven {

-webkit-transform: rotateY(300deg) translateZ(380px);

}

.ring > .twelve {

-webkit-transform: rotateY(330deg) translateZ(380px);

}

.controls {

width: 80%;

margin: 0 auto;

padding: 5px 20px;

-webkit-border-radius: 12px;

background-color: rgba(255, 255, 255, 0.5);

}

.controls > div {

margin: 10px;

}

</style>

<script type="text/javascript" charset="utf-8">

function hasClassName(inElement, inClassName)

{

var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');

return regExp.test(inElement.className);

}

function addClassName(inElement, inClassName)

{

if (!hasClassName(inElement, inClassName))

inElement.className = [inElement.className, inClassName].join(' ');

}

function removeClassName(inElement, inClassName)

{

if (hasClassName(inElement, inClassName)) {

var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');

var curClasses = inElement.className;

inElement.className = curClasses.replace(regExp, ' ');

}

}

function toggleClassName(inElement, inClassName)

{

if (hasClassName(inElement, inClassName))

removeClassName(inElement, inClassName);

else

addClassName(inElement, inClassName);

}

function toggleShape()

{

var shape = document.getElementById('shape');

if (hasClassName(shape, 'ring')) {

removeClassName(shape, 'ring');

addClassName(shape, 'cube');

} else {

removeClassName(shape, 'cube');

addClassName(shape, 'ring');

}

// Move the ring back in Z so it's not so in-your-face.

var stage = document.getElementById('stage');

if (hasClassName(shape, 'ring'))

stage.style.webkitTransform = 'translateZ(-200px)';

else

stage.style.webkitTransform = '';

}

function toggleBackfaces()

{

var backfacesVisible = document.getElementById('backfaces').checked;

var shape = document.getElementById('shape');

if (backfacesVisible)

addClassName(shape, 'backfaces');

else

removeClassName(shape, 'backfaces');

}

</script>

<link type="text/css" rel="stylesheet" charset="UTF-8" href="./Морфинг Кубы питания_files/translateelement.css"><script type="text/javascript" charset="UTF-8" src="./Морфинг Кубы питания_files/main_ru.js"></script><script type="text/javascript" charset="UTF-8" src="./Морфинг Кубы питания_files/element_main.js"></script></head>

<body>

<div class="controls">

<h1><font><font>Анимация, переходы и 3D преобразования</font></font></h1>

<p><font><font>Этот пример показывает еще интересный контент с использованием 3D преобразований, анимации и переходов. </font><font>Обратите внимание, что вы все еще можете выделить текст на элементы, даже если они вращаются. </font><font>Преобразования элементы остаются полностью интерактивными.</font></font></p>

<p><font><font>Нажмите Переключить Форма для переключения между вложенных кубов и одно большое кольцо. </font><font>Обратите внимание, как самолеты плавно перейти в новое место, даже если все формы вращается. </font><font>Вы можете даже прервать этот переход, нажав еще раз, и они вернуться гладко.</font></font></p>

<p><font><font>Переключить Backfaces Видимый флажок, чтобы включить backfaces и выключается с помощью </font></font><code><font><font>-WebKit-противоположная сторона видимости</font></font></code><font><font> .</font></font></p>

<div><button onclick="toggleShape()"><font><font class="">Переключение формы</font></font></button></div>

<div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked=""><label for="backfaces"><font><font>Backfaces видимых</font></font></label></div>

</div>

<div id="container">

<div id="stage" style="-webkit-transform: translateZ(-200px); ">

<div id="shape" class=" backfaces ring">

<div class="plane one"><font><font><img src="Изображение 013.jpg" width=200px height=200px></font></font></div>

<div class="plane two"><font><font class=""><a href=http://www.itym.org>МТЮМ</a></font></font></div>

<div class="plane three"><font><a href=http://www.uni.bsu.by/arrangements/turnir/index.html>РТЮМ</a></font></div>

<div class="plane four"><font><font><a href=http://www.gimnazia56.by>Гимназия 56</a></font></font></div>

<div class="plane five"><font><font class=""><a href=http://www.school-51.gorodgomel.by>Гимназия 51</a></font></font></div>

<div class="plane six"><font><font><img src="DSC02701.JPG" width=200px height=200px></font></font></div>

<div class="plane seven"><font><font><img src="DSC02707.JPG" width=200px height=200px></font></font></div>

<div class="plane eight"><font><font><img src="МТЮМ.png" width=200px height=200px></font></font></div>

<div class="plane nine"><font><font><img src="РТЮМ.gif" width=200px height=200px></font></font></div>

<div class="plane ten"><font><font><img src="Логотип гимназии 56.jpg" width=200px height=200px></font></font></div>

<div class="plane eleven"><font><font><img src="баннер 51.jpg" width=200px height=200px></font></font></div>

<div class="plane twelve"><font><font><img src="DSC02712.JPG" width=200px height=200px></font></font></div>

</div>

</div>

</div><div id="goog-gt-tt" class="goog-tooltip skiptranslate" style="visibility: hidden; display: none; left: 285px; top: 216px; "><div style="overflow:hidden"><div class="logo"><img src="./Морфинг Кубы питания_files/mini_google.png"></div><a class="close-button" href="javascript:void(0)" title="Close"><img src="./Морфинг Кубы питания_files/cleardot.gif" width="15" height="15" style="background-image:url(http://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position:-28px 0px"></a></div><div class="top"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="title left">Original Text:</div></div><div class="middle"><div class="original-text">Toggle Shape</div></div><div class="bottom"><div class="activity-links"><span class="activity-link">Показать альтернативный перевод</span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none; opacity: 0; "></div></div>

</body></html>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности