CSS特效---简单又令人惊艳的鼠标交互特效表单

最新推荐文章于 2024-08-23 11:10:08 发布

bbamx.

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量222

点赞数 4

分类专栏： CSS特效合集文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/nibabaoo/article/details/137640972

版权

CSS特效合集专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、演示

2、一切尽在代码中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
    }
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 350px;
      height: 450px;
      border-radius: 20px;
      background-color: #266fff;
      box-shadow: 15px 15px 10px rgba(33, 45, 58, 0.3);
      position: relative;
      overflow: hidden;
      --color: #fff;
    }
    .container form {
      width: 350px;
      height: 200px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      z-index: 1;
    }
    .container form .tbx {
      width: 250px;
      height: 40px;
      outline: none;
      border: none;
      border-bottom: 1px solid var(--color);
      background: none;
      color: var(--color);
      font-size: 15px;
    }
    .container form .tbx::placeholder {
      color: var(--color);
      font-size: 15px;
    }
    .container form .sub {
      width: 250px;
      height: 40px;
      outline: none;
      border: 1px solid var(--color);
      border-radius: 20px;
      letter-spacing: 5px;
      color: var(--color);
      background: none;
      cursor: pointer;
      margin-top: 20px;
    }
    .container h1 {
      color: var(--color);
      font-size: 50px;
      letter-spacing: 5px;
      font-weight: 100;
      text-shadow: 5px 5px 5px rgba(33, 45, 58, 0.3);
      z-index: 1;
    }

    /* 设置鼠标进入样式 */
    .container .in {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 0px;
      height: 0px;
      border-radius: 50%;
      background: #cf455f;
      transform: translate(-50%, -50%);
      animation: in 0.5s ease-out forwards;
    }

    /* 设置鼠标离开样式 */
    .container .out {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 1200px;
      height: 1200px;
      border-radius: 50%;
      background: #cf455f;
      transform: translate(-50%, -50%);
      animation: out 0.5s ease-out forwards;
    }

    /* 设置鼠标进入时，元素的动画 */
    @keyframes in {
      0% {
        width: 0;
        height: 0;
      }
      100% {
        width: 1200px;
        height: 1200px;
      }
    }
    /* 设置鼠标离开时，元素的动画 */
    @keyframes out {
      0% {
        width: 1200px;
        height: 1200px;
      }
      100% {
        width: 0;
        height: 0;
      }
    }
  </style>
  <body>
    <div class="container">
      <h1>CSDN</h1>
      <form action="">
        <input type="text" class="tbx" placeholder="账号" />
        <input type="password" class="tbx" placeholder="密码" />
        <input type="submit" class="sub" value="登录" />
      </form>
    </div>
  </body>
  <script>
    const container = document.querySelector('.container')

    let isIn = true
    let isOut = false
    let spanEl = null

    container.addEventListener('mouseenter', function (e) {
      if (isIn) {
        let inX = e.clientX - e.target.offsetLeft
        let inY = e.clientY - e.target.offsetTop
        container.style.setProperty('--color', '#000')
        // 创建一个坐标元素 给上对应的起点坐标
        let el = document.createElement('span')
        el.style.left = inX + 'px'
        el.style.top = inY + 'px'
        container.appendChild(el)
        spanEl = container.querySelector('span')
        spanEl.classList.remove('out')
        spanEl.classList.add('in')
        isIn = false
        isOut = true
      }
    })
    container.addEventListener('mouseleave', function (e) {
      if (isOut) {
        container.style.setProperty('--color', '#fff')
        let outX = e.clientX - e.target.offsetLeft
        let outY = e.clientY - e.target.offsetTop
        spanEl.classList.remove('in')
        spanEl.classList.add('out')
        const outEl = document.querySelector('.out')
        outEl.style.left = outX + 'px'
        outEl.style.top = outY + 'px'
        isOut = false
        setTimeout(() => {
          container.removeChild(spanEl)
          isIn = true
        }, 500)
      }
    })
  </script>
</html>