有趣的表单hover 动画效果

最新推荐文章于 2020-12-27 11:22:11 发布

zyzs

最新推荐文章于 2020-12-27 11:22:11 发布

阅读量312

点赞数

文章标签： css html js javascript

本文链接：https://blog.csdn.net/lszyzs/article/details/107011731

版权

样式结构 js 在代码中都有详细注解
效果如图

<!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: #2c3e50;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 450px;
    border-radius: 20px;
    background-color: #34495e;
    box-shadow: 15px 15px 10px rgba(33, 45, 58, .3);
    overflow: hidden;
    position: relative;
  }

  .container form {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    z-index: 1;
  }

  .container form .tbx {
    width: 200px;
    height: 40px;
    border: none;
    outline: none;
    background: none;
    border-bottom: 1px solid #fff;
    color: #fff;
  }

  .container form .tbx::placeholder {
    font-size: 15px;
    color: #fff;
  }

  .container form .sub {
    background: none;
    width: 200px;
    height: 40px;
    letter-spacing: 5px;
    border: 1px solid #fff;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
  }

  .container h1 {
    z-index: 1;
    color: #ecf0f1;
    letter-spacing: 5px;
    font-size: 50px;
    font-weight: 100;
    text-shadow: 5px 5px 5px rgba(33, 45, 58, .3);
  }

  /* 设置鼠标进去的样式 */
  .container .in {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3498bd;
    transform: translate(-50%, -50%);
    /* 使用in动画 持续0.5秒 缓出的时间函数 停留在最后一帧 */
    animation: in .5s ease-out forwards;
  }

  /* 设置鼠标离开的样式 */
  .container .out {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: #3498bd;
    transform: translate(-50%, -50%);
    /* 使用out动画 持续0.5秒 缓出的时间函数 停留在最后一帧 */
    animation: out .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>bilibili</h1>
    <form action="">
      <input type="text" class="tbx" placeholder="点赞">
      <input type="text" class="tbx" placeholder="投币">
      <input type="submit" class="sub" value="一键三连">
    </form>
  </div>
  <script>
    // 定义一个con绑定.container
    const con = document.querySelector('.container');

    // 定义俩个函数开关(门)
    let isIn = true // 鼠标进去的门 默认打开
    let isOut = false // 鼠标出去的门 默认关闭
    // 监听鼠标进去的事件+进去的方法
    con.addEventListener('mouseenter', (e) => {

      if (isIn) { // 进去的时候门是打开的就执行这个函数
        // 生成鼠标的位置 =  进去点进去距离鼠标窗口的距离-父盒子距离窗口的距离
        let inx = e.clientX - e.target.offsetLeft
        let iny = e.clientY - e.target.offsetTop

        // 创建一个span元素 并且给与他对应的出生坐标
        let el = document.createElement('span')
        el.style.left = inx + 'px'
        el.style.top = iny + 'px'
        con.appendChild(el)

        // el.classList.remove('out')
        // el.classList.add('in')
        // 添加进入动画
        el.className = 'in'

        isIn = false // 关闭进来的门(不能使用进入的方法)
        isOut = true // 打开出去的门(可以使用出去的方法)
      }
    })
    // 监听鼠标出来的事件+出来的方法
    con.addEventListener('mouseleave', (e) => {

      if (isOut) { // 进去的时候门是打开的就执行这个函数

        // 生成鼠标的位置 =  进去点进去距离鼠标窗口的距离-父盒子距离窗口的距离
        let inx = e.clientX - e.target.offsetLeft
        let iny = e.clientY - e.target.offsetTop

        let el = document.querySelector('span')

        el.style.left = inx + 'px'
        el.style.top = iny + 'px'

        // el.classList.remove('in')
        // el.classList.add('out')
        // 添加离开动画
        el.className = 'out'

        isOut = false // 关闭出去的门(不可以使用出去的方法)
        // 当动画结束后再删除元素
        setTimeout(() => {
          con.removeChild(el)
          isIn = true
        }, 501)
      }
    })
  </script>
</body>

</html>

zyzs

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有趣的表单hover 动画效果

样式结构 js 在代码中都有详细注解效果如图<!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
复制链接

扫一扫