鼠标移入移出过渡效果

最新推荐文章于 2024-04-26 18:01:53 发布

松岛川树

最新推荐文章于 2024-04-26 18:01:53 发布

阅读量138

点赞数

文章标签： animation flex hashtable gwt svg

本文链接：https://blog.csdn.net/qq_41095729/article/details/121125881

版权

<!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>

松岛川树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移入移出过渡效果

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="...
复制链接

扫一扫