1) Копирую стили и ява скрипт из архива по адресу /www/css и /www/js в соответсвующие папки MD
2) добавляю к сцене новый элемент html
в блоке css
box-sizing: border-box;
}
html {
height: 100%;
background-image: -webkit-radial-gradient(#ffffff, #708090);
background-image: radial-gradient(#ffffff, #708090);
}
#button {
font-family: sans-serif;
position: absolute;
width: 75px;
height: 75px;
left: 50%;
margin: -37.5px;
line-height: 75px;
background-color: black;
border-radius: 50%;
color: white;
text-align: center;
cursor: pointer;
}
#button:before {
content: "\2630";
font-size: 30px;
}
.drop-down,
.drop-down + ul {
-webkit-animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}
.rise-up,
.rise-up + ul {
-webkit-animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}
.rise-up + ul li {
pointer-events: none;
}
.rise-up {
z-index: 1;
}
li {
z-index: -1;
position: absolute;
width: 75px;
height: 75px;
left: 50%;
margin: -37.5px;
list-style: none;
border-radius: 50%;
-webkit-transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47), -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
}
li:nth-child(1) {
background-color: red;
}
.drop-down + ul li:nth-child(1) {
-webkit-transform: translateX(0px) translateY(-100px);
transform: translateX(0px) translateY(-100px);
}
li:nth-child(2) {
background-color: #ffbf00;
}
.drop-down + ul li:nth-child(2) {
-webkit-transform: translateX(70.71068px) translateY(-70.71068px);
transform: translateX(70.71068px) translateY(-70.71068px);
}
li:nth-child(3) {
background-color: #80ff00;
}
.drop-down + ul li:nth-child(3) {
-webkit-transform: translateX(100px) translateY(0px);
transform: translateX(100px) translateY(0px);
}
li:nth-child(4) {
background-color: #00ff40;
}
.drop-down + ul li:nth-child(4) {
-webkit-transform: translateX(70.71068px) translateY(70.71068px);
transform: translateX(70.71068px) translateY(70.71068px);
}
li:nth-child(5) {
background-color: cyan;
}
.drop-down + ul li:nth-child(5) {
-webkit-transform: translateX(0px) translateY(100px);
transform: translateX(0px) translateY(100px);
}
li:nth-child(6) {
background-color: #0040ff;
}
.drop-down + ul li:nth-child(6) {
-webkit-transform: translateX(-70.71068px) translateY(70.71068px);
transform: translateX(-70.71068px) translateY(70.71068px);
}
li:nth-child(7) {
background-color: #8000ff;
}
.drop-down + ul li:nth-child(7) {
-webkit-transform: translateX(-100px) translateY(0px);
transform: translateX(-100px) translateY(0px);
}
li:nth-child(8) {
background-color: #ff00bf;
}
.drop-down + ul li:nth-child(8) {
-webkit-transform: translateX(-70.71068px) translateY(-70.71068px);
transform: translateX(-70.71068px) translateY(-70.71068px);
}
.selected {
z-index: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
@-webkit-keyframes rise {
from {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes rise {
from {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes drop {
to {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
}
@keyframes drop {
to {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
}
<html >
<head>
<meta charset="UTF-8">
<title>color picker menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ ... ze.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='button'></div>
<ul id='swatches'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/j ... '></script>
<script src="js/index.js"></script>
</body>
</html>
кнопка из стилей появляется, но видимо код яваскрипта не вызывается. Как вариант попробовал прямо в коде состояния элемента прописать код скрипта, результат тот же.Если добавить в тело скрипта команду alert("Привет это JavaScript!"); то сообщение на экран выскакивает, т.е. код яваскрипта выполняется. Если открывать этот же код из домашней страницы (не со сцены), то элемент отображается. Взываю о помощи.
upd: само заработало, отчего сразу не работало, понять не могу