├── .gitattributes
├── index.css
└── index.html
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | }
8 |
9 | .box {
10 | display: flex;
11 | }
12 |
13 | .box .inner {
14 | width: 200px;
15 | height: 100px;
16 | line-height: 100px;
17 | font-size: 32px;
18 | font-family: sans-serif;
19 | font-weight: bold;
20 | white-space: nowrap;
21 | overflow: hidden;
22 | }
23 |
24 | .box .inner:first-child {
25 | background-color: indianred;
26 | color: darkred;
27 | transform-origin: left;
28 | transform: perspective(300px) rotateY(-67.3deg);
29 | }
30 |
31 | .box .inner:last-child {
32 | background-color: lightcoral;
33 | color: antiquewhite;
34 | transform-origin: right;
35 | transform: perspective(300px) rotateY(67.3deg);
36 | }
37 |
38 | .box .inner span {
39 | position: absolute;
40 | animation: marquee 5s linear infinite;
41 | }
42 |
43 | .box .inner:first-child span {
44 | animation-delay: 2.5s;
45 | left: -100%;
46 | }
47 |
48 | @keyframes marquee {
49 | from {
50 | left: 100%;
51 | }
52 | to {
53 | left: -100%;
54 | }
55 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | like para más
15 |
16 |
17 | like para más
18 |
19 |