├── .gitattributes ├── index.html └── index.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /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 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /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 | } --------------------------------------------------------------------------------