09.01.2019, 11:18
|
 |
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Плавно изменить цвета
Есть страничка, нужно что бы плавно изменялись цвета у элементов, с темного на более светлые и назад к темным, с определённым интервалом, например в 1000милисекунд. Для простоты взял один див с фоном и бордер и два спана, для всего указал только по пять цветов для простоты.
<style>
div.g { background: #e1e1e1; border: 1px solid #cacaca;} /* background #dbdbdb; #d5d5d5; #cfcfcf; #c9c9c9; border #c4c4c4; #bebebe; #b8b8b8; #b2b2b2; */
span.a { color: #009900; } /* #00a500; #00b400; #00c300; #00d200; */
span.b { color: #0000ff; } /* #1e1eff; #3c3cff; #5a5aff; #7878ff; */
</style>
<div class="g">
<span class="a">test</span><br>
<span class="b">test</span><br>
</div>
Или если возможно как реализовать, что бы можно было указать начальный и конечный цвета, количство оттенков градиента и интервал с которым цвета меняются, возможно ли реализовать подобное? |
|
09.01.2019, 11:31
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
|
|
09.01.2019, 11:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
m~r.Nemo,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{
width:100px;
height:100px;
-webkit-animation: color 5s ease-in-out infinite;
-moz-animation: color 5s ease-in-out infinite;
-o-animation: color 5s ease-in-out infinite;
animation: color 5s ease-in-out infinite;
}
@keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
@-webkit-keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
09.01.2019, 12:02
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
А разве все браузеры поддерживают? Иногда без скриптов не обойтись...
|
|
09.01.2019, 12:19
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Конечно предпочтительнее что бы скрипт определил 50-100 оттенков градиента, вручную это немалый кусок работы, определить все оттенки для десятка-двух элементов...
|
|
09.01.2019, 14:34
|
 |
Профессор
|
|
Регистрация: 25.01.2015
Сообщений: 163
|
|
Я бы так сделал если через скрип.
var color = ["FF0000", "FFA500", "FFFF00", "008000", "0000FF", "000080", "800080", "..."];
for (let index = 0; index < color.length; index++) {
//а тут с каждой итерацией применяй новый цвет c нужной задержкой.
}
|
|
09.01.2019, 16:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
11.01.2019, 15:48
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
рони, я не про это имел ввиду, к примеру есть блочный элемент (див) высотой 1пиксель и шириной 60-100, задан фон градиентом, возможно ли узнать код цвета в каждой точке?
|
|
11.01.2019, 16:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
11.01.2019, 19:59
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
рони,
ясно, в принципе с css-анимацией разобрался, это то что мне надо, но остался вопрос как реализовать анимацию на яваскрипт, типа
Сообщение от рони
|
m~r.Nemo,
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
|
только для текста фона и т д если есть не два цвета а все необходимые оттенки.
|
|
|
|
