animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Wave Text

1<a href='https://www.youtube.com/watch?v=szLmLFsisbY' target="_blank">
2  <section class="section">
3  <div class="container">
4    <div class="row mt-15">
5   
6       <div class="text-center widthset">
7         <div class="position-relative rounded-top progress-wrapper" style=" background-image: linear-gradient(to bottom, #f8e739, #f1d42d, #eac222, #e1b019, #d89e10);">
8            <div class="wave" style="bottom: 80%;">
9              <h1 class="heading-style">L</h1>
10           </div>
11          </div>
12         
13         
14       </div>
15      
16       <div class="text-center widthset">
17         <div class="position-relative rounded-top progress-wrapper" style="background-image: linear-gradient(to bottom, #d89e10, #e28f00, #ec7f00, #f66b00, #ff5200);">
18            <div class="wave" style="bottom: 80%;">
19              <h1 class="heading-style">I</h1>
20           </div>
21          </div>
22         
23         
24       </div>
25      
26       <div class="text-center widthset">
27         <div class="position-relative rounded-top progress-wrapper" style="background-image: linear-gradient(to bottom, #e2130b, #e1110c, #e00f0d, #df0c0d, #de090e);">
28            <div class="wave" style="bottom: 80%;">
29              <h1 class="heading-style">Q</h1>
30           </div>
31          </div>
32         
33         
34       </div>
35      
36       <div class="text-center widthset">
37         <div class="position-relative rounded-top progress-wrapper" style="background-image: linear-gradient(to bottom, #ce0061, #d50079, #d60094, #d000b3, #c115d4);">
38            <div class="wave" style="bottom: 80%;">
39              <h1 class="heading-style">U</h1>
40           </div>
41          </div>
42         
43         
44       </div>
45      
46       <div class="text-center widthset">
47         <div class="position-relative rounded-top progress-wrapper" style="background-image: linear-gradient(to bottom, #6a0ddc, #5f0ddd, #530edd, #450fde, #3210de);">
48            <div class="wave" style="bottom: 80%;">
49              <h1 class="heading-style">I</h1>
50           </div>
51          </div>
52         
53         
54       </div>
55      
56      
57       <div class="text-center widthset">
58         <div class="position-relative rounded-top progress-wrapper" style="background-image: linear-gradient(to bottom, #0c2fd4, #0045d8, #0056d9, #0065d8, #1b73d5);">
59            <div class="wave" style="bottom: 80%;">
60              <h1 class="heading-style">D</h1>
61           </div>
62          </div>
63         
64         
65       </div>
66      
67      
68    </div>
69  </div>
70  </section>
71</a>