How much can css animation do?
Github has a very good animation project with 50000 stars!
- Project address: https://github.com/daneden/animate.css
Online effect display:
There is only one css file in the whole project of animate, and the use method is very simple. Just add the class attribute to the corresponding element
Small Demo of animation by levitation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet"> <title>Animate Animation display of</title> </head> <body> <style> body, html{ margin: 0; padding: 0; } #title{ margin-top: 200px; font-size: 30px; line-height: 60px; font-size: 0; width: 100%; font-weight: bold; color: #AB3319; } #title span{ font-size: 20px; background-color: #FCF6E5; display: inline-block; width: 20%; height: 60px; text-align: center; box-sizing: border-box; border: 1px solid #A84631; } </style> <div class="animated infinite flip delay-2s" style="text-align: center; font-size: 60px; margin-top: 30px; color: #64B587;"> Animate Animation display</div> <div id="title"> <span>Recommend</span> <span>Ranking List</span> <span>song sheet</span> <span>radio station</span> <span>singer</span> </div> <script> const spans = window.document.querySelector("#title").querySelectorAll("span"); for(let span_index = 0; span_index < spans.length; span_index++){ spans[span_index].addEventListener("mouseenter", (e)=>{ console.log(spans[span_index], "enter"); spans[span_index].setAttribute("class", 'animated rubberBand'); }) spans[span_index].addEventListener("mouseleave", (e)=>{ console.log(spans[span_index], "mouseleave") spans[span_index].setAttribute("class", ''); }) } </script> </body> </html>
Summary:
Adding css animation to a website is the easiest way to add interest to a web page~