滑鼠移入移出過渡效果
阿新 • • 發佈：2021-08-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; margin: auto; border-radius: 50%; border: 5px solid pink; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .item { width: 90px; height: 90px; background-color: pink; border-radius: 50%; display: none; } .slide-in-left { -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-out-left { -webkit-animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } @keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } </style> </head> <body> <div class="box"> <div class="item"></div> </div> <script> const box = document.querySelector(".box"); const item = document.querySelector(".item"); box.onmouseover = () => { item.classList.add("slide-in-left"); item.classList.remove("slide-out-left"); item.style.display = "block"; }; box.onmouseout = () => { item.classList.add("slide-out-left"); item.classList.remove("slide-in-left"); }; </script> </body> </html>