html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<!--
Кароче, народ, я этот код не трогал дней 11, но, я все же научился работать с css и в скором времени доработаю это
спасибо за внимание
с уважением 4maks1m
( ˘ ³˘)♥︎
-->
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
background:linear-gradient(lightblue, yellow);
width:500px;
height:1000px;
}
.one {
z-index: 3;
position: relative;
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
animation-name: colorchange;
animation-duration: 10s;
animation-iteration-count:infinite ;
-webkit-animation-name: colorchange;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count:infinite ;
}
@keyframes colorchange {
0% {background-color: red; }
25% {background-color: orange;}
50% {background-color: green; }
70% {background-color: blue; }
90% {background-color: purple;}
100% {background-color: red; }
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run