12.03.2019, 22:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#a {
width: 255px;
height: 125px;
background: #cfe6cf;
border-radius: 15px/12px;
border: 1px solid #c0c0c0;
position: absolute;
}
#b {
width: 25px;
height: 100px;
display: inline-block;
position: absolute;
top: 15px;
left: 122.5px;
-webkit-transform-origin: 50% 0 ;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#a.anim #b {
-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-moz-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-o-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-ms-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
#c {
width: 1px;
height: 75px;
background: #999;
position: absolute;
left: 12px;
}
#d {
width: 1px;
height: 1px;
background: transparent;
border-top: 15px solid #000080;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
left: 120px;
}
#U_2e {
width: 25px;
height: 25px;
display: inline-block;
border-radius: 50%;
background: -moz-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -webkit-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -o-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -ms-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
position: absolute;
top: 75px;
}
@-webkit-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-moz-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-o-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-ms-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
</style>
</head>
<body>
<div id="a" class="anim">
<span id="d"></span>
<span id="b">
<span id="c"></span>
<span id="U_2e"></span>
</span>
</div>
<script>
var a = document.querySelector("#a");
a.addEventListener("click", function() {
a.classList.remove("anim");
document.documentElement.clientWidth;
a.classList.add("anim");
});
</script>
</body>
</html>
Последний раз редактировалось рони, 12.03.2019 в 22:04.
|
|
12.03.2019, 22:08
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
То самое, что я не могла найти, всё супер.
|
|
14.03.2019, 03:32
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от Блондинка
|
|
То самое, что я не могла найти, всё супер.
|
Если вы хотели добавить префиксы, то вам ещё нужно добавить -webkit-border-radius и -moz-border-radius.
Однако свойств -ms-animation, правила @-ms-keyframes и функции -ms-radial-gradient никогда в никаком браузере не существовало!
Также свойства -moz-transform, -ms-transform и -o-transform бессмысленны внутри правила @-webkit-keyframes.
Также свойства -webkit-transform, -ms-transform и -o-transform бессмысленны внутри правила @-moz-keyframes.
Также свойства -webkit-transform, -ms-transform и -moz-transform бессмысленны внутри правила @-o-keyframes.
У вас также допущена ошибка в синтаксисе функции radial-gradient
Для последних 40 версии браузеров (однако IE9+) код может выглядеть так...
#a {
width: 255px;
height: 125px;
background: #cfe6cf;
-webkit-border-radius: 15px / 12px;
border-radius: 15px / 12px;
border: 1px solid #c0c0c0;
position: absolute;
}
#b {
width: 25px;
height: 100px;
display: inline-block;
position: absolute;
top: 15px;
left: 122.5px;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#a.anim #b {
-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
#c {
width: 1px;
height: 75px;
background: #999;
position: absolute;
left: 12px;
}
#d {
width: 1px;
height: 1px;
background: transparent;
border-top: 15px solid transparent;
border-top-color: #000080;
position: absolute;
left: 120px;
}
#U_2e {
width: 25px;
height: 25px;
display: inline-block;
-webkit-border-radius: 50%;
border-radius: 50%;
background: -webkit-radial-gradient(60% 40%, circle, #99f, #00f);
background: -o-radial-gradient(60% 40%, circle, #99f, #00f);
background: radial-gradient(circle at 60% 40%, #99f, #00f);
position: absolute;
top: 75px;
}
@-webkit-keyframes pendulum-1 {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes pendulum-1 {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
|
|
14.03.2019, 09:26
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Malleys
|
|
Указывайте, что вы делали, что именно у вас не получается, и пусть это будет в одной теме!
|
Перенесла в одну тему
Последний раз редактировалось Блондинка, 14.03.2019 в 09:57.
Причина: перенесла в одну тему
|
|
14.03.2019, 09:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Блондинка,
можно run добавить так?
[html run]
... минимальный код страницы с вашей проблемой
[/html]
|
|
18.03.2019, 13:28
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
laimas,
а как присвоить диву id class и стиль, а спану id и заполнить, спан текстом взятыми из контейнера <code>, и чтобы при клике на див менялись id a, b, c, d, e, a и так по кругу ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #f0f0f0; border: 1px solid #999; width: 720px; padding: 15px; margin-bottom: 10px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
#a { border-radius: 50px 0 0 50px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
</style>
</head>
<body>
<pre><code>
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="utf-8"><br>
<title>border-radius</title><br>
<style><br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
</style><br>
</head><br>
<body><br>
<div class="radius"></div><br>
</body><br>
</html>
<code/></pre><br>
<div id="" class=""><span id=""></span></div><br>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>
другими словами хочу продемонстрировать как меняются свойства без изображений, как это сделано на этом сайте
|
|
18.03.2019, 18:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
На том сайте представлены все "варианты", видны все элементы, менять имена атрибутов не нужно. Хотите также - делайте видимым каждый последующий. Хотите на одном показать изменения, изменяйте значение параметра правила стиля.
|
|
18.03.2019, 18:36
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Значит осталось найти ответы на три вопроса, первый как присвоить стиль диву и заполнить спан а потом при клике менять, второй это как преобразовать нормальный код в мнемонику "кавычки", и третий решить вопрос с подсветкой кода.
|
|
18.03.2019, 18:43
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Я не представляю какой демонстратор вы хотите иметь, но если имеется набор значений одного правила стиля, которые нужно показать на одном элементе, то технически это можно представить в виде списка или группы кнопок, в котором выбранное значение применяется к одному элементу без всяких изменений его класса, а тем более идентификатора.
|
|
18.03.2019, 19:30
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
ну надо 35 строчку в коде выше заменить на
<div style=""><span></span></div><br>
и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки. |
|
|
|
